我有一堆带有类名的元素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?
我想有A B和C中间对齐.
我怎样才能D完全走向正确?
之前:
后:
这样做的最佳做法是什么?
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}Run Code Online (Sandbox Code Playgroud)
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>Run Code Online (Sandbox Code Playgroud)