选择器权重与伪类选择器

1.上下文选择器/层级选择器

css语法表达

1.子元素：>  
2.后代元素: 空格
3.相邻兄弟：+
4.所有兄弟：~

层级：>,空格

平级：+，~

---

2.选择器权重

页面元素：标签+属性 样式规则：选择器{声明}

#

1.选择器的权重,计算过程

<div class="a">
   <h1 id="b" class="c">hello world</h1>
</div>

css文件

div {
    background-color: red;
    width: 200px;
}
div > h1 {
    color: blue;
}

div标签的样式的权重是：0个id，0个class，1 个标签 ——（0，0，1）

h1标签的权重是： 0个id，0个class，2 个标签(div+h1) ——（0，0，2）

2. 现在改变字的颜色

div {
    background-color: red;
    width: 200px;
}
div > h1 {
    color: blue;
}
div > h1 {
    color: cyan;
}

这里通过后写样式覆盖先前的样式将字的颜色经行改变

3. 现在想将字改回原来的颜色

有两种方法：

1.第一种是继续使用后写的样式去覆盖先前的样式

2.第二种就是改变样式的权重

div {
    background-color: red;
    width: 200px;
}
div > h1.leteracy {
    color: blue;
}
div > h1 {
    color: cyan;
}

现在div > h1.leteracy的权重是：0个id，1个class，2个tagName —— （0，1，2）

而先前div > h1的权重是：0个id，0个class，2个tagName —— （0，0，2）

显然（0，1，2） > (0 , 0 ,2)

通过这样的写法，css通过选择器的权重从而可以忽略书写的顺序

4. 调试样式

在样式后加 ！important 从而忽略样式的权重

div {
    background-color: red;
    width: 200px;
}
div > h1.leteracy {
    color: blue;
}
div > h1 {
    color: cyan !important;
}

此时虽然上一个h1的权重大于后一个的权重，但是后一个样式中加了!important就只显示后一个的样式

伪类选择器

1.计算权重，伪类也算是class

结构伪类

1.生成无序列表

<ul class="list">
        <li class="item1">item1</li>
        <li class="item2">item2</li>
        <li class="item3">item3</li>
        <li class="item4">item4</li>
        <li class="item5">item5</li>
        <li class="item6">item6</li>
        <li class="item7">item7</li>
        <li class="item8">item8</li>
        <li class="item9">item9</li>
        <li class="item10">item10</li>
        <li class="item11">item11</li>
        <li class="item12">item12</li>
        <li class="item13">item13</li>
        <li class="item14">item14</li>
        <li class="item15">item15</li>
    </ul>

2.改变全部样式CSS写法

写法1：

ul {
    width:100px;
    background-color: black;
}
ul>li {
    color:aqua;
    background-color: violet;
}

写法2：使用伪类：匹配分组的任意位置的子元素th-of-type(n)

ul {
    width:100px;
    background-color: black;
}
ul>:nth-of-type(n) {
    color:aqua;
    background-color: violet;
}

效果是一样的

参数解释：

:nth-of-type(an+b):
a=[0,1,2….]
n=[0,1,2,….]
b为偏置量
如 -n+3 ：

-n	result
0	5
-1	4
-2	3
-3	2
-4	1

忽略 =< 0 的数字
即改变前五个的样式
将其改成:nth-last-type-(an+b):一样的参数就会变成后五个
又如：
:nth-of-type(-2n+15)

-n	-2n+15
0	15
1	13
2	11
3	9
4	7
5	5
6	3
7	1

将选中这些样式