现在有一个这样的结构
要将’选中’变成红色改怎么使用css
<div class="cont">
<p>不选中</p>
<p >不选中</p>
<h1>不选中</h1>
<p class="item">选中</p>
<p class="item">不选中</p>
<p>不选中</p>
<p class="item">不选中</p>
<p class="item">不选中</p>
<p class="item">不选中</p>
</div>
首先想到的是 伪类选择器
.item:first-child
但是上面这句其实是选中一下两个条件都满足的元素
- class为
.item的元素- 是父元素第一个元素
也就是说这句加上去,不会选到任何一个元素,因为父元素
div下的第一个元素不是class='.item'的元素
除此之外,可以使用兄弟选择器
~,这个选择器A~B则可以选中 A后的所有B元素,只要它们共用一个父元素,
于是可以得出第一个方案
先选中全部的.item
.cont> .item {
color: red;
}
再撤销不需要选中的
.cont> .item ~ .item {
color: #000;
}
文章来源：https://www.toymoban.com/news/detail-439510.html
这样弄不太好,因为初始属性还要去重新设置,要是每个
<p></p>的颜色都是在不同地方设置的不同颜色,就不好改了文章来源地址https://www.toymoban.com/news/detail-439510.html
这时候可以用 :not选择器得出方案二
.cont>.item:not(.item ~ .item){
color: red;
}
建议
- 第一,不要用伪类选择器怎么搞,因为手机好像不能用兄弟选择器的样子,放到手机上就失效了
- 第二,可读性太差,而且如果想选中第二个就需要再再用兄弟选择器,第三个以此类推,会写很长,不如直接在
class里面加个item_1这种的,用2个class选中.item,.item_1会快很多
到了这里，关于如何用css选择器选中某个类的第一个元素的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
