<div class="wrapper">
<p class="test1">1</p>
<p class="test2">2</p>
<p class="test3">3</p>
<p class="test4">4</p>
<p class="test5">5</p>
</div>
p{
width:40px;
margin:8px auto;
line-height:40px;
border:1px solid gray;
text-align:center;
font-weight: 700;
}
X + Y 相邻选择器
X + Y : 相邻兄弟选择器 选择匹配Y的元素,且该元素为所匹配X元素后面相邻的位置。
.test1+p{
background-color:green;
color:#fff
}
X > Y 子选择器
X > Y:子包含选择器 选择匹配Y
的元素,且该元素为所匹配X
元素的子元素。
.wrapper>p{
background-color:#f5524b;
color:#fff;
border:none
}
X ~ Y 相邻选择器
X ~ Y: 选择所有后面的兄弟节点们
.test2~p{
background-color:#0eabdf;
color:#fff;
border:none
}
X[title] 属性选择器
<div class="demo">
<a href="" title="标题">1111111111</a>
<a href="" title="标题-1">222222222</a>
<a href="" title="标题-2">3333333333</a>
<a href="" title="标题-3">444444444</a>
<a href="" title="名字-1">5555555555</a>
<a href="" title="名字-2">6666666666</a>
</div>
a {
display: block;
width:300px;
text-align: center;
margin: 10px auto;
color: #000;
text-decoration: none;
}
a[title] {
background: green;
color: #fff;
}
X[title=””] 另一种属性选择器
a[title="标题"] {
background: #ff9900;
color: #fff;
}
属性选择器,上述代码不只匹配带有title
属性,更匹配title属性等于”标题”的链接元素
。[]内不只可用title属性,还可以使用其他属性。
X[title*=””] 模糊匹配属性选择器
a[title*="标题"]{
background: #3a8aee;
color: #fff;
}
选择器匹配属性值以标题
指定值开头的每个元素。
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li><span>item7</span></li>
<li>item8</li>
</ul>
ul{
list-style: none;
}
.list li{
line-height:24px
}
:first-child
.list li:first-child{
background-color:yellow;
}
:last-child
:last-child
选择器用来匹配父元素中最后一个
子元素。
:nth-child()
nth-child(n)
选择器匹配父元素中的第n
个子元素。n
可以是一个数字,一个关键字,或者一个公式。
.list li:nth-child(2){
background-color:#09ac24;
}
Odd 和 even
Odd 和 even 是可用于匹配下标是奇数或偶数
的子元素的关键词
.list li:nth-child(odd)
{
background:#e73a3a;
}
.list li:nth-child(even)
{
background:#f5a72c;
}
:nth-last-child(n)
:nth-last-of-type(n)
选择器匹配同类型中的倒数第n个同级兄弟元素
。n可以是一个数字,一个关键字,或者一个公式
.list li:nth-last-child(6) {
background-color:#15d6af;
}
选择前几个元素
.list li:nth-child(-n+6) {
background: #F05442;
color: #fff;
}
从第几个开始选择
.list li:nth-child(n+4){
background: #F05442;
color: #fff;
}
限制选择某一个范围
:nth-child(-n+6):nth-child(n+3){
background: #F05442;
color: #fff;
}
:nth-of-type(n)
:nth-of-type(n)
选择器匹配同类型中的第n个同级兄弟元素。
.list li:nth-of-type(3) {
background: #635f5c;
}
:only-child
:only-child
选择器匹配属于父元素中唯一子元素
的元素。
span:only-child{
background: #f26f0f;
}
:not
:not(selector)
选择器匹配每个元素是不是指定的元素/选择器。
.list li:not(:last-child){
background: #0fcff2;
}
参考文章 还需要学习的十二种CSS选择器
参考文章 CSS选取第几个标签元素:nth-child(n)、first-child、last-child