结构伪类选择器简介
结构伪类选择器- - -根据文档结构,使用伪类选择器选择元素。常用于根据父元素,使用伪类选择器选择子元素。
结构伪类选择器的使用方法
方法一:父元素名 子元素名:first-child/last-child/nth-child()
first-child:第一个孩子
last-child:最后一个孩子
nth-child():括号里面可以写- - - 数字、关键字、公式
数字—直接指定第几个
关键字—even:偶数 odd:奇数
公式—n:代表选择所有子元素,n会从0开始,每次增加1,直到选择到最后一个;
3n:选择第3、6、9…个子元素。原理:n从0开始,30=0,31=3,3*2=6、、、 其他倍数n依次类推;
n+5:从第5个开始。原理:n从0开始,0+5=5,1+5+6,、、、;
-n+5:选择前5个。原理:n从0开始,-0+5=5,-1+5=4,、、、;
注意:n+5、-n+5这里n放在前面才有效。换成5+n、5-n后不生效
方法二:父元素名 子元素名:first-of-type/last-of-type/nth-of-type()
此方式用法和上面使用方法一样
-child和-of-type区别
-child会给父元素下的所有子元素排序,先找在父元素下的第几个子元素,然后看前面写的元素名称,找到的子元素和写的元素名一致,才生效
-of-type会现在找要选择的元素名称,然后找该元素中的第几个
无序/有序列表,子元素只有li,两个效果一样,一般用-child
当父元素中有不同种类的子元素时,-child就可能选择不到,需要使用-of-type进行选择
示例
代码示例:
<!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>
<style>
/* 第一个子元素 */
ul li:first-child {
background-color: pink;
}
/* 最后一个子元素 */
ul li:last-child {
background-color: pink;
}
/* 第2个子元素 */
ul li:nth-child(2) {
background-color: rgb(223, 115, 65);
}
/* 选择第3、6、9...子元素 */
ul li:nth-child(3n) {
background-color: green;
}
/* n代表选择所有,n会从0依次开始增加1,直到最后一个子元素 */
.fruit li:nth-child(n) {
background-color: pink;
}
/* even代表偶数 */
.fruit li:nth-child(even) {
color: rgb(236, 118, 20);
}
/* odd代表偶数 */
.fruit li:nth-child(odd) {
color: cornflowerblue;
}
/* 从第5个开始 */
.sport li:nth-child(n+5) {
background-color: pink;
}
/* 此写法不生效,会先找div下的第一个孩子是span,然后和p对比,发现不一致,不生效*/
div p:first-child {
background-color: pink;
}
/* 此写法生效,会先找到div下的p,然后找第一个p */
div p:first-of-type {
background-color: green;
}
/* 从第2个开始 */
div p:nth-of-type(n+2) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
<li>我是第9个孩子</li>
<li>我是第10个孩子</li>
</ul>
<ol class="fruit">
<li>苹果</li>
<li>梨</li>
<li>香蕉</li>
<li>橙子</li>
<li>草莓</li>
<li>榴莲</li>
</ol>
<ol class="sport">
<li>跑步</li>
<li>游泳</li>
<li>跳绳</li>
<li>骑行</li>
<li>登山</li>
<li>篮球</li>
</ol>
<div>
<span>wawawa</span>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</div>
</body>
</html>
页面效果: