我有一堆具有类名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
类的第一个子对象为目标?
发布于 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或更早的版本)。
发布于 2012-11-08 19:15:25
正确答案是:
.red:first-child, :not(.red) + .red { border:5px solid red }
第一部分:如果元素是其父元素的第一个,并且具有"red“类,则它将获得边框。
第二部分:如果".red“元素不是它的父元素的第一个,而是紧跟在没有".red”类的元素之后,那么它也应该得到这个边框的荣誉。
菲利普·道布迈尔的答案虽然被接受,但并不正确--见附件小提琴。
BoltClock的答案可以工作,但不必要地定义和覆盖样式
(特别是一个问题,否则它将继承一个不同的边框-您不希望将other声明为边框:none)
编辑:如果你有几次“红色”跟随在非红色之后,每个“第一个”红色都会得到边框。为了防止这种情况,人们需要使用BoltClock的答案。请参阅fiddle
发布于 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
复制相似问题