CSS селектор с глубоким уровнем - PullRequest
Новая
       3

CSS селектор с глубоким уровнем

0 голосов
/ 28 марта 2020

в следующем 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 ]

2 голосов
/ 28 марта 2020

Это ожидаемое поведение. Потому что он наследует цвет фона от родительского элемента. Но вы можете изменить дочерний элемент background-color 

.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>
1 голос
/ 28 марта 2020

Селектор работает правильно, зеленый фон применяется только к родительской строке, но дочерние элементы строки также отображают его. Вы можете легко переопределить это. 

.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>
...