选择器权重，常用伪类选择器

选择器权重

html代码

<h2 class="mytitle" id="idtitle">实例演示</h2>

css代码

/* id: 百位 class: 十位 tag: 个位 
理解最小值：0,0,1   理解最大值：1,1,1
以下是特例：
!important: 最高指示,忽略任何权重(调试样式)
*/
/* 
计算方法
id:0 
class: 0
tag: 0
权重 : 0,0,0 */
/* 0,0,1 */
h2 {
  color: blueviolet;
}
/* 0,0,2 */
body h2 {
  color: blue;
}
/* 0,1,1 */
h2.mytitle {
  color: aqua;
}
/* 1,0,1 */
h2#idtitle {
  color: brown;
}

常用伪类选择器

html代码

<ul class="list">
        <li>节点1</li>
        <li>节点2</li>
        <li>节点3</li>
        <li>节点4</li>
        <li>节点5</li>
        <li>节点6</li>
        <li>节点7</li>
        <li>节点8</li>
    </ul>

css代码

/*
     :nth-of-type(a*n+b)
     1. a: 系数, [0,1,2,...] 可自己定义数值
     2. n: [0,1,2,3,....] 自变量，默认写n
     3. b: 偏移量, 从0开始 根据需求设置数值
     注: 计算出来的索引,必须是有效, 从1开始
*/
/* 获取所有 */
/* .list > * {
    background-color: antiquewhite;
} */
.list :nth-of-type(n) {
  background-color: aliceblue;
}
/* 获取第一个 */
/* 
.list :nth-of-type(1) {
  background-color: aliceblue;
} */
.list :first-of-type() {
  background-color: aliceblue;
}
/* 获取最后一个 */
.list :last-of-type() {
  background-color: aquamarine;
}
/* 获取第三个和第三个之后的所有元素 */
.list :nth-of-type(n + 3) {
  background-color: blue;
}
/* 获取第三个和第三个之前的所有元素 */
.list :nth-of-type(-n + 3) {
  background-color: blueviolet;
}
/* 获取索引为基数的所有元素 */
/* .list :nth-of-type(2n+1){
    background-color: blue;
}
.list :nth-of-type(2n-1){
    background-color: blue;
} */
.list :nth-of-type(odd) {
  background-color: brown;
}
/* 获取索引为偶数的所有元素 */
/* .list :nth-of-type(2n) {
  background-color: burlywood;
} */
.list :nth-of-type(even) {
  background-color: burlywood;
}