<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 儿子序列选择器 -->
<style type="text/css">
/*给是p的第一个元素进行选择
必须保证p是第一个子元素
如果不是则无法选中
*/
p:first-child {
background: pink;
}
/*h3不是子元素中的第一个
不会被选中
*/
h3:first-child {
background: green;
}
/*item会被选中*/
.item:first-child {
background: orange;
}
/*选取最后一个*/
.item:last-child {
background: red;
}
h3:last-child {
line-height: 50px;
}
/*选取偶数
p中的偶数都会被选中
*/
p:nth-child(even) {
background: purple;
}
/*选取基数
p中的奇数被选中
*/
p:nth-child(odd) {
background: brown;
}
/*选取指定的某一个
从1开始算
1,2,3...
*/
p:nth-child(1) {
line-height: 50px;
}
/*4个为一组,每组的第一个被选中
默认从前面开始选择
n从0开始计算 0,1,2..
*/
p:nth-child(4n+1) {
border: 5px solid #000;
}
/*分组,从后面开始选择
受到后面h3的影响计算是从最后面开始
*/
p:nth-last-child(3n+1) {
background: skyblue;
}
</style>
</head>
<body>
<div>
<p class="item">1-1</p>
<p class="item">2-2</p>
<p class="item">3-3</p>
<p class="item">4-4</p>
<p class="item">5-5</p>
<p class="item">6-6</p>
<p class="item">7-7</p>
<p class="item">8-8</p>
<p class="item">9-9</p>
<p class="item">10-10</p>
<h3 class="item">1-1</h3>
<h3 class="item">2-2</h3>
<h3 class="item">3-3</h3>
<h3 class="item">4-4</h3>
<h3 class="item">5-5</h3>
</div>
</body>
</html>```
<css3-子元素序列选择器>
最新推荐文章于 2024-06-13 22:49:40 发布