17CSS3选择器——伪类选择器一
文章目录
- 1、E:root
- 2、E:nth-child(n)
- 3、E:nth-last-child(n)
- 4、E:nth-of-type(n)
- 5、E:nth-last-of-type(n)
- 6、E:last-child
- 7、E:first-of-type
- 8、E:last-of-type
- 9、E:only-child
- 10、E:only-of-type
- 11、E:empty
- 12、E:target
- 13、E:not(s)
- 14、E:enabled & E:disabled
- 15、E:checked
1、E:root
该选择器选择文档的根节点，效果和设置 html 相同。（在html⽂档中根元素就是html）
Title
2、E:nth-child(n)
选择 E 元素父元素的第 n 个子元素。n 有两种取值：
n取值为整数
Title
1
"">2
3
4
选择器选取了 的父元素的第三个子元素。
注：这些子元素不一定是同种类型，如上述例子中，父元素的第二个子元素是 ,它与其它 是兄弟元素。另外，当该选择器取整数时，只能取正整数。
n取值为表达式
当取值为表达式时，变量只能使用 n，并且 n 从 0 开始依次加1，即取值为表达式时，选择器选择多个值，[n=0,1,2,3…]。当计算结果小于等于 0 或 大于子元素总数时，不选取元素。
Title
1
"">2
3
4
表达式为 2n-1，[n=0,1,2,3...]，计算结果为 nth-child(1)，nth-child(3)…，所以该选择器选择了第一个和第三个元素。
注：使用表达式时，CSS3 提供了两个特殊值：odd 和 even。odd 相当于 2n+1，even 相当于 2n。
3、E:nth-last-child(n)
与 E:nth-child(n) 相比多了一个 last，其实该选择器与前者十分相似，只不过前者是从前往后计数第 n 个，该选择器是从最后一个往前计数。
Title
1
2
"">3
4
5
6
可以看到，从最后一个元素往前计数，第一个、第三个、第五个元素都被选择器选中。
4、E:nth-of-type(n)
该选择器与 E:nth-child(n) 语法相同，在选择的元素上有些区别。该元素选择的是与 E 相同类型的兄弟元素，我们来看一个例子：
"UTF-8">
Title
1th of ele,1th of p
2th of ele,2th of p
"https://www.baidu.com">3th of ele,1th of a
4th of ele,3th of p
5th of ele,4th of p
6th of ele,5th of p
该选择器选择的是与 p 类型相同的兄元素，表达式为 2n+1，即选择奇数项元素，可以看到第一个第三个第五个 p 元素都被选中了。
5、E:nth-last-of-type(n)
该选择器与之前我们学习的 E:nth-last-child(n) 相类似，它与上一个选择器 E:nth-of-type(n) 选择元素的方式相同，只不过计数是从最后一个符合条件的兄弟元素开始往前计数。
"UTF-8">
Title
1th of ele,1th of p
2th of ele,2th of p
"https://www.baidu.com">3th of ele,1th of a
4th of ele,3th of p
5th of ele,4th of p
6th of ele,5th of p
7th of ele,6th of p
6、E:last-child
该选择器选择 E 元素的父元素的最后一个子元素。
"UTF-8">
Title
wo
ai
bai
du
注：该选择器需要满足父元素的最后一个元素和 E 才会选取，否则不会选取，例如下面这段代码
Title
wo
ai
bai
du
Hello
7、E:first-of-type
该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。
Title
baidu
wo
ai
bai
du
baidu
wo
可以看到，第一个子元素是 ，第一个符合类型一致的子元素是
8、E:last-of-type
该选择器选择 E 元素父元素的子元素的最后一个与 E 元素类型一致的元素。
Title
baidu
wo
ai
bai
du
baidu
du
可以看到，最后一个子元素是 ，最后一个符合类型一致的子元素是
注：first-of-type、 last-of-type 与之前的 last-child 和在 CSS2 中我们这里没有讲解的 first-child 的区别就是，first-of-type、last-of-type 选择的是第一个或最后一个类型一致的元素，这个元素一定存在，而 first-child 和 last-child 则第一个或最后一个元素与 E 类型一致时才会选择，否则选择器不生效，即符合的元素不一定存在。
9、E:only-child
该元素选择的是 E 是其父元素唯一的子元素：
Title
"div1">
hello world
"div2">
hello baidu
wo ai xue xi
hello world
可以看到，父元素中唯一有一个 元素的是 div1，div2 中有两个元素，所以选择器选择了
10、E:only-of-type
该选择器选择的是 E 是其父元素唯一的子元素类型：
Title
"div1">
hello world
"div2">
hello baidu
wo ai xue xi
可以看到，选择器选择了两个元素，在两个 div 块中，都只有一个 类型，所以都被选取。
11、E:empty
该选择器选择的是空元素，匹配每个没有任何子级的元素（包括文本节点）。
"UTF-8">
Title
hello world
hello bai du
可以看到，第二个空的
元素被选取了。
12、E:target
该选择器选择的是一个 id 与 当前 url 匹配的元素，匹配当前活动的target元素的样式。
"UTF-8">
Title
"#p1">jump to p1
"#p2">jump to p2
"p1">p1
"p2">p2
点击两个 link 链接，可以发现，对应跳转的元素样式相应的改变了。
13、E:not(s)
该选择器匹配不符合参数选择器 s 描述的元素（匹配除了指定s元素的其他元素）
Title
"demo"
>hello world
hello bai du
hello
可以看到，第一个否定伪类选择器选择了 class 不为 demo 的 元素，样式为红色；第二个否定伪类选择器选择了 class 不为 demo 的 元素，样式为蓝色。
14、E:enabled & E:disabled
该选择器匹配的是元素的可用和禁用状态，主要用于表单元素。E:enabled 匹配每个启用的元素， E:disabled匹配每个禁用的元素。
"UTF-8">
Title
"text"
name="test1"
placeholder="disabled"
disabled="true"
/>
"text" name="test2" placeholder="enabled" />
可以看到，输入框的可用和不可用两种状态都被选择器获取到了。
15、E:checked
匹配每个选中的输⼊元素(仅⽤于单选按钮或复选框)，该选择器一般用于 radio或 checkbox，选择它们的 checked 状态：
Title
"checkbox" name="checkbox" />
点击复选框，查看选择器选中元素的效果。可以看到，当复选框属性为 checked 时，复选框被选中，样式改变。
示例2：
input:checked{
width: 100px;
}
input:checked~label {
color: red;
}
