CSS选择器权重和伪类选择器学习小结

选择器权重

权重的概念：

将任何一个”选择器”视为由:id,class,tag组成的 3 位整数

1. 现在生成一个div和div下的一个h1标签

<div class="window">
        <h1 id="leteral" class="leteracy">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 个标签 ——（0，0，2）

效果：

2. 现在改变字的颜色

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

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

效果：

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

有两种方法：

• 第一种是继续使用后写的样式去覆盖先前的样式
• 第二种就是改变样式的权重

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就只显示后一个的样式

效果：

伪类选择器

注意：在计算权重时，伪类任然算是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.改变全部样式：

写法一：

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

效果：

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

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

效果和上图一样

3改变部分样式：

使用伪类改变前5个的样式

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

效果：

使用伪类改变后5个样式：

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

效果：

使用伪类改变奇数个的样式：

ul {
    width:100px;
    background-color: black;
}
ul>:nth-of-type(odd) {
    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

将选中这些样式