CSS_css选择器,选择所有子元素、最后一个、第一个、单数、双数、第n个、反选,nth-child,last-child,first-child
程序员文章站
2022-05-01 14:21:55
...
html
<div class="list">
<div></div>
<div></div>
<div></div>
</div>
<style>
.list div{
width: 500px;
height: 20px;
margin-top: 5px;
border: 1px solid #000;
}
</style>
选择全部
.list div{
background: red;
}
选择元素第n个
:nth-child(n)
选择第二个
.list div:nth-child(2){
background: red;
}
计数器选择
使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
在这里,我们指定了下标是 3 的倍数的所有 div 元素的背景色:
.list div:nth-child(3n+0){
background: red;
}
选择元素最后一个
:last-child
.list div:last-child{
background: red;
}
css反选
:not
.list div:not(:last-child){
background: red;
}
选择元素第一个
:first-child
.list div:first-child{
background: red;
}
选择元素单数
:nth-child(odd)
.list div:nth-child(odd){
background: red;
}
选择元素双数
:nth-child(even)
.list div:nth-child(even){
background: red;
}
上一篇: CSS 样式、选择器
下一篇: CSS样式——选择器