Как выбрать элемент без выбора дочерних элементов

Question

Когда я выбираю элемент, он выбирает все дочерние элементы.Например

div {
  border: solid;
}

<div>
  <p>
    Some Text
  </p>
  <div>
    <p>
      Some Text
    </p>
  </div>
  <p>
    Some Text
  </p>
</div>

Он не только делает сплошной большую границу div, но и делает внутреннюю внутреннюю границу div сплошной.

РЕДАКТИРОВАТЬ: есть ли способ выбрать более высокий div без создания класса?

Answer 1

Селектор CSS будет применять свой стиль ко всем соответствующим элементам.Если ваш стиль использует div для соответствия элементу, соответствующие стили будут применены ко всем div элементам в вашем HTML.(Это не относится ни к одному из элементов p, поскольку они не совпадают).Вам нужно найти способ быть более конкретным при нацеливании на элемент.

Одним из способов может быть добавление класса в div в вашем HTML.Например div class="border-div"> ... </div>.Теперь элемент может быть нацелен на вашу таблицу стилей с помощью селектора .border-div { ....

Другой способ может заключаться в том, чтобы нацелить родительский элемент с одним селектором, а дочерние элементы - с другим селектором.Например, вы бы нацелились на родительский div, как вы уже сделали: с помощью селектора div { ....Но вы можете дополнительно настроить таргетинг на его дочерние элементы и переопределить стили, установленные для родительского элемента, с помощью div div {....Более конкретные селекторы всегда будут переопределять менее специфичные селекторы.

Подробнее о действующих селекторах CSS см. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Answer 2

Вы применяете стили ко всем элементам div, для различий он создает класс

.parent {
  border: solid black 1px;
}

.child {
  border: solid green 1px
}

<div class="parent">
  <p>
    Some Text
  </p>
  <div class="child">
    <p>
      Some Text
    </p>
  </div>
  <p>
    Some Text
  </p>
</div>