HTML 选择器学习

1.基本选择器

1.1 选择器介绍

序号	类型	表示	描述
1	id	#id 名	根据 id 名选择,设置一组相同 id 名元素重的第一个，，权重最重
2	class	.class 名	根据 class 名选择,设置相同 class 名元素，，权重其次
3	tag	h2,table…	根据标签选择,设置相同标签名元素，权重最轻

1.2 使用

例子

语法

html


<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:1
class: 1
tag: 1
权重 : (1,1,1)
*/
body h2 {
  color: violet;
}
/* 
id:0
class: 0
tag: 2
权重 : (0,0,2)
*/

2.伪类选择器

2.1 伪类选择器介绍

序号	类型	描述	案例
1	结构伪类	根据元素位置获取元素（需要设置查询起点(父级),否则从根递归）	div :nth-of-type(n)…
2	状态伪类	根据元素状态获取元素（分为表单，行为两类）	<input type="text" enabled> ; :active…
3	文档伪类	根据元素的描述	:empty
4	伪元素	元素指定部分素	::after

2.2 使用

例子

效果演示2

语法

html

<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>

/* 第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)