带有类的第一个元素的CSS选择器
带有类的第一个元素的CSS选择器
我有一堆带有类名的元素red，但我似乎无法class="red"使用以下CSS规则选择第一个元素：
.red:first-child {
border: 5px solid red;
}
<p class="red"></p>
<div class="red"></div>
这个选择器有什么问题，如何纠正？
感谢这些评论，我发现该元素必须是其父母的第一个孩子才能被选中，这与我的情况不同。我有以下结构，这条规则失败，如评论中所述：
.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？
宝慕林4294392浏览 6180回答 3
3回答
-
摇曳的蔷薇
该:first-child选择的目的是，像它的名字说，选择父标签的第一个孩子。孩子必须嵌入在同一个父标签中。您的确切示例将起作用（刚试过这里）：<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选择器：<html><head><style type="text/css">.red:nth-of-type(1){ border:5px solid red;} </style></head><body> <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></body></html>致Martyn的学分。更多信息，例如这里。请注意，这是一个CSS 3选择器，因此并非所有浏览器都能识别它（例如IE8或更早版本）。 -
qq_遁去的一_1
正确答案是：.red:first-child, :not(.red) + .red { border:5px solid red }第一部分：如果元素是第一个到它的父级并且具有类“红色”，它将获得边界。第二部分：如果“.red”元素不是第一个到它的父元素，而是紧跟一个没有类“.red”的元素，它也应该得到所述边界的荣誉。小提琴或它没有发生。Philip Daubmeier的答案虽然被接受了，但却不正确 - 请参阅随附的小提琴。BoltClock的答案可行，但不必要地定义和覆盖样式（特别是否则会继承不同边框的问题 - 你不想声明其他边框：none）编辑：如果你有几次非红色的“红色”，每个“第一”红色将获得边框。为了防止这种情况，人们需要使用BoltClock的答案。看小提琴
随时随地看视频慕课网APP
Html/CSS
CSS3
Html5