带有类的第一个元素的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？
3 回答
摇曳的蔷薇
TA贡献1793条经验 获得超6个赞
该: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
TA贡献1725条经验 获得超7个赞
正确答案是：
.red:first-child, :not(.red) + .red { border:5px solid red }第一部分：如果元素是第一个到它的父级并且具有类“红色”，它将获得边界。
第二部分：如果“.red”元素不是第一个到它的父元素，而是紧跟一个没有类“.red”的元素，它也应该得到所述边界的荣誉。
Philip Daubmeier的答案虽然被接受了，但却不正确 - 请参阅随附的小提琴。
BoltClock的答案可行，但不必要地定义和覆盖样式
（特别是否则会继承不同边框的问题 - 你不想声明其他边框：none）
编辑：如果你有几次非红色的“红色”，每个“第一”红色将获得边框。为了防止这种情况，人们需要使用BoltClock的答案。看小提琴
- 3 回答
- 0 关注
- 6179 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消