收藏
PHPz批改状态：合格
老师批语：
1.1 选择器介绍
| 序号 | 类型 | 表示 | 描述 |
|---|---|---|---|
| 1 | id | #id 名 | 根据 id 名选择,设置一组相同 id 名 元素重的第一个，，权重最重 |
| 2 | class | .class 名 | 根据 class 名选择,设置相同 class 名 元素 ，，权重其次 |
| 3 | tag | h2,table… | 根据 标签选择,设置相同 标签名 元素 ，权重最轻 |
1.2 使用
语法
<head><!-- css导入 --><link rel="stylesheet" href="css/selector-weight.css" /></head><body><h1 id="active">id选择</h1><h1 class="title">class选择</h1><h2 >tag选择</h1></body>
h2 {color: violet;}.title {color: red;}#active {color: seagreen;}
1.3 选择器权重介绍
选择器权重表示
（0，0，0）
用 id 表示 千位，用 class 表示 百位 ，用 tag 表示个位
选择器权重计算
h2.title#active {color: violet;}/*id:1class: 1tag: 1权重 : (1,1,1)*/body h2 {color: violet;}/*id:0class: 0tag: 2权重 : (0,0,2)*/
2.1 伪类选择器介绍
| 序号 | 类型 | 描述 | 案例 |
|---|---|---|---|
| 1 | 结构伪类 | 根据元素位置 获取元素 （需要设置查询起点(父级),否则从根递归） | div :nth-of-type(n)… |
| 2 | 状态伪类 | 根据元素状态 获取元素 （分为表单，行为两类） | <input type="text" enabled> ; :active… |
| 3 | 文档伪类 | 根据元素的描述 | :empty |
| 4 | 伪元素 | 元素指定部分素 | ::after |
2.2 使用
语法
<head><style>@import url("css/selector-fake.css");</style></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><li>item9</li><li>item10</li><li>item11</li><li>item12</li><li>item13</li><li>item14</li><li>item15</li><li>item16</li><li>item17</li><li>item18</li></ul></body>
css
/* 第1个 */.list > li:first-of-type {background-color: green;}/* 倒数第1个 */.list > li:last-of-type {background-color: yellow;}/* 倒数第4个 */.list > li:nth-last-of-type(4) {background-color: violet;}
2.3 参数计算
2.3.1 :nth-of-type(an+b)参数介绍
参数 a: 系数, [0,1,2,…]
参数 n: [0,1,2,3,….]
参数 b: 偏移量, 从 0 开始
注: 计算出来的索引,必须是有效, 从 1 开始
2.3.2 匹配一个元素
系数为 0 ， a = 0
匹配第一个
偏移量为 1 ，b = 1
nth-of-type(0n+1)
简写成
nth-of-type(1)
2.3.3 匹配一组元素
系数为不为 0
匹配第 3 个元素后面的所有元素
系数为 1 ， a = 1
偏移量为 3 ，b = 3
nth-of-type(1n+3)
简写成
nth-of-type(n+3)
系数为 -1 ， a = -1
偏移量为 3 ，b = 3
nth-of-type(-1n+3)
简写成
nth-of-type(-n+3)
系数为 2 ， a = 2
偏移量为 1 ，b = 1
nth-of-type(2n+1)
也可写成
nth-of-type(even)
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
