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

#css

Вопрос:

У меня есть элемент с идентификатором. Я пытаюсь выбрать некоторые из его дочерних элементов с помощью селекторов CSS.
#myDiv span, #myDiv i работает, но мне интересно, есть ли для этого более короткий путь.

Я пробовал вложенные селекторы, такие как

 #myDiv {
  amp; span, i {
    color: red
  }
}

но это не сработало.

 #myDiv span, #myDiv i {
  color: red
}

 <div id="myDiv">
  <span>My Span</span>
  <p>My P</p>
  <i>My I</i>
</div>

1. Ваш вложенный код находится в SCSS , а не в CSS, и в CSS нет вложенности

2. Нет, это не так, вот как работает CSS. И это также причина популярности SCSS, вам нужно писать намного меньше. в будущем это будет возможно с помощью CSS (пока нигде не поддерживается).

3. @АбдулрахманХатем О, спасибо. Хорошо, есть ли другой способ?

4. Просто сделайте #myDiv > *:not(p) — выделите всех детей, кроме абзацев. Использование дочернего комбинатора и CSS :не псевдокласс

5. Собственный CSS также может получить это в какой-то момент в будущем, по крайней мере, для этого есть предложение: drafts.csswg.org/css-nesting/Overview.bs

Ответ №1:

Ваш вложенный код находится в SCSS, а не в CSS, и в CSS нет вложенности.

Самый короткий CSS-код, если вы не будете добавлять какие-либо другие элементы в этот контейнер в будущем, будет

 #myDiv *:not(p) {
   color: red
}

1. использование * не является хорошей идеей…, что делать, если позже будет добавлен тег a, например

2. Конечно, но только для этого кода он будет самым коротким!

3. так что самое короткое-это хорошо, даже если это вызовет проблемы в будущем?

4. Никогда, но если мы откроем все возможности в будущем, он изменит свой код, возможно, он добавит другой i или span под тот же контейнер, не придавая им красного цвета, поэтому ему придется изменить даже свой CSS-код, никто не знает, что принесет будущее!

5. Если вы будете кодировать все с установкой «Вы не знаете, что принесет будущее» и «если результат изменится, я могу изменить это снова», код будет невозможно поддерживать. Единственный правильный ответ заключается в том, что его код хорош и так.

Ответ №2:

Если вы хотите, чтобы он был рекурсивным (скажем, в будущем некоторые элементы #myDiv будут иметь свои собственные дочерние элементы), используйте:

 #myDiv > *:not(p) {
   color: red
}

1. Это * никогда не бывает хорошей идеей. Это означало бы, что если в будущем появится новый a тег, он тоже будет окрашен в красный цвет. И это также окрасит тег p в красный цвет.

2. Я не заметил p требования к тегу. измененный ответ.

3. Теперь ваш ответ совпадает с принятым ответом. просто говорю

4. Нет, это не так. Я использую знак стрелки, который означает непосредственных потомков выбранного элемента.

5. Моя вина. это лучше, чем принятый ответ. И все же я бы никогда не воспользовался * селектором.

Ответ №3:

Тебе может понравиться это:

 #myDiv {
  amp; span, amp; i {
    color: red
  }
}

похоже, вы забыли поставить «amp;» перед каждым новым селектором классов.