带有类的第一个元素的CSS选择器
我有一堆具有类名red的元素，但是我似乎不能使用以下CSS规则选择带有class="red"的第一个元素：
.home .red:first-child {
border: 1px solid red;
}<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
这个选择器哪里错了?我如何纠正它以red类的第一个子对象为目标？
回答 14
Stack Overflow用户
发布于 2010-04-27 06:58:02
顾名思义，:first-child选择器用于选择父标记的第一个子标记。所以这个例子将会起作用(刚刚在here上试过了)：
<body>
<p class="red">first</p>
<div class="red">second</div>
</body>但是，如果您将标签嵌套在不同的父标签下，或者如果red类的标签不是父标签下的第一个标签，那么这将不起作用。
还要注意，这不仅适用于整个文档中的第一个这样的标记，而且每次都有新的父标记被包装在它周围，例如：
<div>
<p class="red">first</p>
<div class="red">second</div>
</div>
<div>
<p class="red">third</p>
<div class="red">fourth</div>
</div>那么first和third将会是红色的。
对于您的情况，您可以使用:nth-of-type选择器：
.red:nth-of-type(1)
{
border:5px solid red;
} <div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
归功于Martyn，他删除了包含此方法的答案。更多信息，例如here。请注意，这是一个CSS3选择器，因此不是所有的浏览器都能识别它(例如IE8或更早的版本)。
Stack Overflow用户
发布于 2012-11-08 19:15:25
正确答案是：
.red:first-child, :not(.red) + .red { border:5px solid red }第一部分:如果元素是其父元素的第一个，并且具有"red“类，则它将获得边框。
第二部分:如果".red“元素不是它的父元素的第一个，而是紧跟在没有".red”类的元素之后，那么它也应该得到这个边框的荣誉。
菲利普·道布迈尔的答案虽然被接受，但并不正确--见附件小提琴。
BoltClock的答案可以工作，但不必要地定义和覆盖样式
(特别是一个问题，否则它将继承一个不同的边框-您不希望将other声明为边框:none)
编辑:如果你有几次“红色”跟随在非红色之后，每个“第一个”红色都会得到边框。为了防止这种情况，人们需要使用BoltClock的答案。请参阅fiddle
Stack Overflow用户
发布于 2017-01-13 08:57:45
您可以使用first-of-type或nth-of-type(1)
.red {
color: green;
}
/* .red:nth-of-type(1) */
.red:first-of-type {
color: red;
}<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
https://stackoverflow.com/questions/2717480
复制相似问题