在下面的 html/css 代碼中，我想僅選擇第 1 級而不是更深層次的所有元素“行”。但是子選擇器還選擇嵌套的“行”元素？我怎樣才能只選擇1級“行”元素？.content > .row{ background-color: green;}<div class="content"> <div class="row">Level 1 - Row 1</div> <div class="row">Level 1 - Row 2 <div class="row">Level 2 - Row 1</div> <div class="row">Level 2 - Row 2</div> </div> <div class="row">Level 1 - Row 3</div></div>
2 回答
慕虎7371278
TA貢獻1802條經(jīng)驗 獲得超4個贊
這是預期的行為。因為它繼承了父元素的背景顏色。但是你可以改變子元素的背景顏色
.content > .row
{
background-color: green;
}
.content > .row > .row{
background-color: white
}
<div class="content">
<div class="row">Level 1 - Row 1</div>
<div class="row">Level 1 - Row 2
<div class="row">Level 2 - Row 1</div>
<div class="row">Level 2 - Row 2</div>
</div>
<div class="row">Level 1 - Row 3</div>
</div>
翻閱古今
TA貢獻1780條經(jīng)驗 獲得超5個贊
選擇器工作正常，綠色背景僅應用于父行，但子行元素也會顯示它。您可以輕松地覆蓋它。
.content > .row {
background-color: green;
}
.content > .row .row { background-color: red; }
<div class="content">
<div class="row">Level 1 - Row 1</div>
<div class="row">Level 1 - Row 2
<div class="row">Level 2 - Row 1</div>
<div class="row">Level 2 - Row 2</div>
</div>
<div class="row">Level 1 - Row 3</div>
</div>
- 2 回答
- 0 關注
- 136 瀏覽
添加回答
舉報
0/150
提交
取消