我有一堆带有类名的元素red,但我似乎无法class="red"使用以下CSS规则选择第一个元素:
.red:first-child {
border: 5px solid red;
}Run Code Online (Sandbox Code Playgroud)
<p class="red"></p>
<div class="red"></div>Run Code Online (Sandbox Code Playgroud)
这个选择器有什么问题,我该如何纠正?
感谢这些评论,我发现该元素必须是其父母的第一个孩子才能被选中,这与我的情况不同.我有以下结构,这条规则失败,如评论中所述:
.home .red:first-child {
border: 1px solid red;
}Run Code Online (Sandbox Code Playgroud)
<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>Run Code Online (Sandbox Code Playgroud)
我怎样才能让第一个孩子上课red?
我正在尝试用一个叫做的类来选择第h1一个.它是有效的,如果它是这个中的第一个元素,但如果它在此之后它将无法工作.divdetail_containerh1divul
<style type="text/css">
.detail_container h1:first-child
{
color:blue;
}
</style>
</head>
<body>
<div class="detail_container">
<ul>
<li></li>
<li></li>
</ul>
<h1>First H1</h1>
<h1>Second H1</h1>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我的印象是我拥有的CSS h1无论在哪里都会选择第一个div.我怎样才能使它工作?