位置: IT常识 - 正文
如何用css选择器选中某个类的第一个元素(css选择器 菜鸟教程)
编辑：rootadmin如何用css选择器选中某个类的第一个元素 现在有一个这样的结构
本文链接地址:https://www.jiuchutong.com/zhishi/292369.html
转载请保留说明！
推荐整理分享如何用css选择器选中某个类的第一个元素(css选择器 菜鸟教程)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css选择器及对应语法,如何用css选择器打开文件,如何用css选择器填充颜色,如何用css选择器打开文件,如何用css选择器打开文件,如何用css选择器打开文件,如何用css选择器填充,如何用css选择器填充颜色,内容如对您有帮助，希望把文章链接给更多的朋友！
要将’选中’变成红色改怎么使用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; }这样弄不太好,因为初始属性还要去重新设置,要是每个<p></p>的颜色都是在不同地方设置的不同颜色,就不好改了
这时候可以用 :not选择器得出方案二.cont>.item:not(.item ~ .item){ color: red; }建议第一,不要用伪类选择器怎么搞,因为手机好像不能用兄弟选择器的样子,放到手机上就失效了第二,可读性太差,而且如果想选中第二个就需要再再用兄弟选择器,第三个以此类推,会写很长,不如直接在class里面加个item_1这种的,用2个class选中.item,.item_1会快很多上一篇：寓意幸福和团圆的春节灯笼，中国 (© d3sign/Moment/Getty Images)(寓意幸福和团圆的网名)
下一篇：森佩尔森林公园中的黑海杜鹃，德国吕根岛 (© Sandra Bartocha/Minden Pictures)(森佩塑胶)