权重和结构伪类的认知 -

权重

id	class	tag
百	十	个

备注：id能不用就不用，权重太大

/* 权重
id：百位
class：十位
tag：个位
例如：（0，0，0）第一个0就是id，第二个是class，最后才是tag */
/* 演示： */
/* 他的权重就是（0，0，1） */
h1{
    color: blanchedalmond;
}
.one{
    color: aqua;
}
/* 他的权重就是（0，1，0） */
#two{
    color: aquamarine;
}
/* 权重应当就是（1，0，0） */
/* 
（1，0，0）> (0,1,0) >(0,0,1) */
/* 还有一个是忽略任何权重的，最高指示的
!important */
h1{
    color: blue !important;
}

伪类

结构伪类

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类</title>
    <link rel="stylesheet" href="demo2.css">
</head>
<body>
    <!-- 结构伪类 -->
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
    </ul>
</body>
</html>

如何让第一个元素添加样式，有两种方式：
1.:nth-of-type()
2.:first-of-type

.list >li:nth-of-type(1){
    background-color:aqua;
}
.list >li:first-of-type{
    background-color:aqua;
}

效果如下：

" class="reference-link">

如何让最后一个元素添加样式
:last-of-type

.list >li:last-of-type{
    background-color:rgb(5, 56, 56);
}

效果如下：

" class="reference-link">

如何让倒数某某元素添加样式
:nth-last-of-type()

.list >li:nth-last-of-type(6){
    background-color: rgb(75, 13, 13);
}

效果如下：

结构伪类的参数

:nth-of-type(an+b)
1.a:系数，[0,1,2,...]
2.n:[0,1,2,3,...]
3.b:偏移量，从0开始
注：计算出来的索引，必须是有效的，从1开始

匹配单个元素来设置样式
/* 1.匹配一个 */
.list>:nth-of-type(0n+3){
    background-color: rgb(57, 36, 148);
}

效果如下：

" class="reference-link">

如何匹配一组元素改变样式
/* 2.匹配一组 */
.list>:nth-of-type(n){
    background-color: blueviolet;
}

效果如下：

" class="reference-link">

/* 匹配第三元素后面的所有兄弟元素 */
.list > :nth-of-type(n+3){
    background-color: blueviolet;
}

效果如下：

" class="reference-link">

/* 匹配第三个元素前面的兄弟元素 */
.list > :nth-of-type(-n+3){
    background-color: chartreuse;
}

效果如下：

" class="reference-link">

/* 匹配倒数三位元素的兄弟元素 */
.list > :nth-last-of-type(-n+3){
    background-color: darkgoldenrod;
}

效果如下：

" class="reference-link">

/* 如何让偶数元素添加样式    2种方式*/
.list > :nth-of-type(2n){
    background-color: darkgreen;
}
.list > :nth-of-type(even){
    background-color: darkgreen;
}

效果如下：

" class="reference-link">

/* 如何让奇数元素添加样式  3种方式*/
.list > :nth-of-type(2n-1){
    background-color: darkseagreen;
}
.list > :nth-of-type(2n+1){
    background-color: darkseagreen;
}
.list > :nth-of-type(odd){
    background-color: darkseagreen;
}