CSS选择器 【class选择器】 【id选择器】 【important】【first-child】【nth-child()】【hover】

1.列举元素的权重

先上张表格

选择器	权重值
!important	infinite
内联式选择器	1,0,0,0
id选择器	0,1,0,0
类选择器 | 伪类结构 | 伪类链接 | 属性选择器	0,0,1,0
标签选择器  |  伪元素选择器	0,0,0,1

后代选择器，权重是 各个部分相加 

1.元素的权重的举例

1. 通配符选择器

通配符权重是0

通配符选择器权重大于浏览器的默认权重【user agent stylesheet 表示浏览器默认】，如下图

继承的权重是最小的

2. 标签选择器

权重是0,  0,  0，1

2.1伪元素选择器

权重是0, 0 , 0,  1

        div::after {
            content: '1';
            display: inline-block;
        }

        div::before {
            content: '2';
            display: inline-block;
        }

3. 类选择器

权重是0,  0，1，0

4. id选择器

权重是0，1，0，0

        div {
            /* 权重是0,0,0,1 */
            color: pink; 
        }

        .red {
            /* 权重是0,0,1,0 */
            color: red;
        }

        #blue {
            /* 权重是0,1,0,0 */
            color: blue;
        }

5. 结构伪类选择器

权重是0,0,1,0

        /* 权重是10 */
        /* 1. nth-child(n)  first-child last-child第一个和最后一个不是span，就不会生效 */
        /* n可以是数字 公式 odd even */
        div:first-child {
            color: pink;
        }

        div:last-child {
            color: pink;
        }

        /* 2. 第一个和最后一个不是span，也会生效 */
        /* n可以是数字 公式 odd even */
        div:nth-of-type(5) {
            color: red;
        }

        div:first-of-type {
            color: blue;
        }

        div:last-of-type {
            color: yellow;
        }

6. 伪元素选择器

权重是0,0,1,0

         /* 1. 权重为0,0,0,1 */
        div::after {
            content: '1';
            display: inline-block;
        }

        div::before {
            content: '2';
            display: inline-block;
        }

7.  链接伪类选择器

权重是10

        /* 权重是0,0,2,0 */
        a:link {
            color: red;
        }

        a:visited {
            color: orange;
        }

        a:hover {
            color: yellow;
        }

        a:active {
            color: green;
        }

8. 同级选择器和毗邻选择器

html结构

    <ul>
        <li>1</li>
        <li class="son">2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <ul>
        <li>1</li>
        <li class="son1">2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div class="father">
        <p>1111</p>
        <span>2222</span>
        <span>3333</span>
    </div>

css结构：

         /* 权重都为 0,0,0,0 */
        /* 1. 毗邻元素选择器 紧随.son元素后面的同级元素的第一个 */
        .son+li {
            color: red;
        }

        /* 能够选出span标签 前提是父级是一样的 */
        /* 只会选出，p标签后面的第一个span */
        p+span {
            font-size: 28px;
        }

        /*2. 同级选择器，先选中第一个小li 再匹配第一个小li后面的所有同级小li  */
        .son1~li {
            background-color: blue;
        }

9. 子元素选择器和后代选择器

        /* 1. 后代选择器 div里面的所有span不论是儿子还是孙子都选出来了 */
        /* 权重是 0,0,0,2 */
        div span {
            color: red;
        }

        /* 2. 子代选择器 */
        /* 只选出了亲儿子 span2 3  只选出最亲的 */
        /* 权重是0,0,0,0*/
        div>span {
            font-size: 25px;
        }

        span {
            font-size: 50px;
        }

10.！important

权重最大，infinite

2.元素的权重的计算

先逗号，再空格，再冒号

// 权重是 0,0,4,2   由  0,0,2,1 + 0,0,2,1
.service_box:last-child h1, .service_box:last-child div  {
    padding-left: 10px;
}

比如图示的选择器的权重,权重为

结尾：

学习id： 201903090124-

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。