选择器权重与伪类选择器参数计算个人小结

一. 实例演示选择器权重,并写出详细计算过程

1.选择器的优先级

 ID 选择器> class·选择器> tag选择器
 当一个标签同时被多个选择器选中，我们便需要确定这些选择器的优先级
 计算选 ID 选择器的个数（千），计算class选择器的个数之和（百），计算tag选择器的个数之和（个）。按千位数、百位数跟个位数的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中千‘百、个都相等，则按照"就近原则"来判断。

2.1案例一

// HTML
 <h1 id="ys1" class="ys2">PHP中文网</h1>
// CSS
h1 {color: brown;}
        .ys2 {color: blue;}
        h1.ys2{color: red;}
        h1#ys1.ys2{color: blueviolet}
结论
最终的 color 为 blueviolet ，因为h1标签选择器权重是（0，0，1）.ys2类选择器权重是（0，1，0）h1.ys组合选择器权重（0，1，1）
h1#ys1.ys2组合选择器权重（1，1 ，1）

二. 实例演示常用伪类选择器,并写出参数计算过程

1.结构伪类代码

//HTML
 <div>
        <ul class="nav">
            <li>inem1</li>
            <li>inem2</li>
            <li>inem3</li>
            <li>inem4</li>
            <li>inem5</li>
            <li>inem6</li>
            <li>inem7</li>
            <li>inem8</li>
            <li>inem9</li>
            <li>inem10</li>
        </ul>
    </div>
//css
.nav>li:nth-of-type(2){color: blue;}
/* 匹配分组的任意位置的子元素  图一 */
.nav>li:first-of-type{color: blueviolet;}
/* 匹配分组的第一个子元素 图二 */
.nav>li:last-of-type{color:aqua;}
/* 匹配分组的最后一个子元素 图三  */
.nav>li:only-of-type {color: red;}
/* 匹配分组后唯一子元素 图四 */
.nav>li:nth-last-of-type(2) {color:brown;}
/* 反向匹配分组任意位置的子元素 图五 */

2.图例

图一

图二

图三

图四

图五

3.伪类选择器参数小结

公式: :nth-of-type(an+b): 计算出来的索引,必须是有效的, 且从 1 开始的正整数
a(系数, 取值范围: [0, 1, 2,...])
n(取值范围: [0, 1, 2,...])
b(索引计算起始偏移量, 从 0 开始)
:nth-of-type(0n + 3),匹配第 3 个元素
:nth-of-type(n + 3),匹配从 3 个元素开始的所有兄弟
:nth-of-type(-n + 3), 与n+3类似,只是反向获取
:nth-of-type(2n), 获取偶数索引的元素
:nth-of-type(2n+1), 获取奇数索引的元素
偶数even,奇数odd,2n+1,其实偏移量只要不是0就可以

4.伪类选择器参数的案例