CSS权重计算与伪类

CSS权重计算与伪类

一、CSS权重计算

<div>
    <ul class = "list">
    <li id = "item1">内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
    </ul>
</div>

权重计算过程

1

以 div.list.li { color:red;}为例

id	class	tag	total
0	1	2	(0,1,2)

2

以 #item { color:red;}为例

id	class	tag	total
1	0	0	(1,0,0)

3

以 list #item { color:red;}为例

id	class	tag	total
1	1	0	(1,1,0)

调试模式 !important

li{ font-size:20px;}  !important

使用此模式，忽略其他权重，优先级第一。

二、伪类及参数

1.nth-of-type(n),表示选中第几个元素，例如

<div>
    <ul class = "list">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
    </ul>
</div>
<style>
.list> :nth-of-type(3) /*选中第3个/
.list> :nth-first-of-type() /*选中第1个/
.list> :nth-last-of-type() /*选中最后1个/
</style>

2.nth-of-type(an+b),计算公式

1.参数an+b,其中a表示系数，b表示偏移量，n取值自整数0，1，2，3，4……；
2.an的值必须大于0，即为有效；an表示索引，以当前第几个元素为起点
3.b的值可以为0
4.a可以为复数
5.取奇偶,（odd）为奇数，（even）为偶数；

选择一组

<div>
    <ul class = "list">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
    </ul>
</div>
list> :nth-of-type(1n+b){color:blue;}

选中全部：计算过程

第一次：nth-of-type(1n+b)=nth-of-type(1x0+0)=nth-of-type(0),参数=0无效;
第二次：nth-of-type(1n+b)=nth-of-type(1x1+0)=nth-of-type(1)，表示以第一个元素开始，不用偏移，即选中第1个；
第三次：nth-of-type(1n+b)=nth-of-type(1x2+0)=nth-of-type(2)，表示以第一个元素开始，不用偏移，即选中第2个；
第四次：以此类推，直到结束为止。

选第3个及以后：计算过程

第一次：nth-of-type(1n+3)=nth-of-type(1x0+2)=nth-of-type(0),参数an=0无效;
第二次：nth-of-type(1n+2)=nth-of-type(1x1+2)=nth-of-type(3)，表示以第一个为起点，往后偏移2个单位，即选中第3个；
第三次：nth-of-type(1n+2)=nth-of-type(1x2+2)=nth-of-type(4)，表示以第二个为起点，往后偏移2个单位，即选中第4个；
第四次：以此类推，直到结束为止。

选前3个：计算过程

第一次：nth-of-type(-1n+3)=nth-of-type(-1x0+3)=nth-of-type(3),选中第3个;
第二次：nth-of-type(-1n+3)=nth-of-type(-1x1+3)=nth-of-type(2),选中第2个;
第三次：nth-of-type(-1n+3)=nth-of-type(-1x2+3)=nth-of-type(1),选中第1个;
第四次：nth-of-type(-1n+3)=nth-of-type(-1x3+3)=nth-of-type(0),参数无效;

选倒数3个：计算过程

第一次：nth-last-of-type(-1n+3)=nth-of-type(-1x0+3)=nth-last-of-type(3),选中倒数第3个;
第二次：nth-last-of-type(-1n+3)=nth-of-type(-1x1+3)=nth-last-of-type(2),选中倒数第2个;
第三次：nth-last-of-type(-1n+3)=nth-of-type(-1x2+3)=nth-last-of-type(1),选中倒数第1个;
第四次：nth-last-of-type(-1n+3)=nth-last-of-type(-1x3+3)=nth-of-type(0),参数无效;

选奇数：nth-of-type(odd)或者nth-of-type(2n-1)

选偶数：nth-of-type(even)或者nth-of-type(2n)