css选择器

最新推荐文章于 2024-09-20 02:44:07 发布
原创最新推荐文章于 2024-09-20 02:44:07 发布 · 280 阅读
0 ·
CC 4.0 BY-SA版权
html 与 css 与js 与jquary 专栏收录该内容
11 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="main" class="main">
    <div>blue
        <div>孙子</div>
    </div>
    <div title="hallo">normal</div>
</div>
<div></div>
<div></div>
<div></div>
<p class="test1">测试 first-line 为某个元素的第一行文字使用样式。</p>
<p>测试选择器， 用户选择后变成黑红色</p>

<style>
    /*类选择器 以 . 开头的*/
        .main {
            width:100px;
            height:100px;
        }
    /*ID选择器 以 # 开头c*/
        #main {
            background-color:red;
        }

    /*
    属性选择器 含有[]的选择器
        形如  [title] {} ， [title='css-world']
        [attribute]	用于选取带有指定属性的元素。
        [attribute=value]	用于选取带有指定属性和值的元素。
        [attribute~=value]	用于选取属性值中包含指定词汇的元素。
        [attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
        [attribute^=value]	匹配属性值以指定值开头的每个元素。
        [attribute$=value]	匹配属性值以指定值结尾的每个元素。
        [attribute*=value]	匹配属性值中包含指定值的每个元素。
    */
        [class='main'] {
            border: 2px solid #000;
        }

        /**选择所有title=hallo 的元素**/
        [title='hallo'] {
            color:#0d0d0d;
        }

    /*
    伪类选择器 含有 :的选择器  */
        /*
         （1）动态伪类
             :hover   鼠标覆盖
             :active  点击中，松开鼠标结束
             :focus   用于元素成为焦点
             :visited 访问过后
             :link    未访问前

         （2）UI元素状态伪类
             :enabled
             :disabled
             :checked

         （3）CSS3的:nth选择器
             :first-child 选择某个元素的第一个子元素；
             :last-child 选择某个元素的最后一个子元素；
             :nth-child 选择某个元素的一个或多个特定的子元素；
             :nth-last-child()  选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
             :nth-of-type() 选择指定的元素；
             :nth-last-of-type()    选择指定的元素，从元素的最后一个开始计算；
             :first-of-type选择一个上级元素下的第一个同类子元素；
             :last-of-type选择一个上级元素的最后一个同类子元素；
             :only-child选择的元素是它的父元素的唯一一个了元素；
             :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
             :empty选择的元素里面没有任何内容。
         */

        .main div:first-child {
            color:blue;
        }

        .main div:first-child:hover {
            cursor:pointer;
        }

    /*伪元素选择器 有两个连续冒号的选择器、
           CSS3对伪元素进行了一定的调整，在以前的基础上增加了一个:
        也就是现在变成了::first-letter,::first-line,::before,::after
        另外还增加了一个::selection

            /*
            :first-line 为某个元素的第一行文字使用样式。
            :first-letter 为某个元素中的文字的首字母或第一个字使用样式。
            :before 在某个元素之前插入一些内容。
            :after 在某个元素之后插入一些内容。
            ::selection 选择器匹配被用户选取的选取是部分。
                        只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
            */
            .test1 {
                width: 200px;
            }
            /**p标签内容文本的第一行**/
            .test1::first-line {
                color:#00ffff;
            }
            /**p标签内容文本的第一个字**/
            .test1::first-letter {
                font-size: 30px;
            }
            /**在p标签内容前插入文本**/
            .test1::before {
                content: "我是before";
            }
            /**在p标签内容后插入文本**/
            .test1::after {
                content: "我是after";
            }
            /**用户选择之后的属性**/
            ::selection {
                color:darkred;
            }

    /*关系选择器*/
        /*（1）后代选择器 空格链接  选择所有合乎规则的后代元素*/
        /**.main的所有儿子孙子重孙等等， 所有的后代元素**/
        .main div {
            font-size:18px;
        }

        /*（2）相邻后代选择器 > 链接  仅仅选择合乎规则的儿子元素*/
        /** main的所有儿子元素， 不选择孙子及其后背元素**/
        .main > div {
            font-size: 30px;
        }

        /*（3）兄弟选择器 ～ 链接 选择当前元素后面的所有合乎规则的兄弟元素*/
        .main ~ div {
            width: 100px;
            height: 100px;
            background-color: #0BB20C;
        }

        /*（4）相邻兄弟选择器 + 链接 仅仅选择当前元素相邻的那个合乎规则的兄弟元素*/
        .main + div {
            background-color: #0d0d0d;
        }
</style>
</body>
</html>