Блог

Главная - Вопросы по программированию - Синтаксис CSS для дочерних элементов, которые не являются прямыми потомками?

Синтаксис CSS для дочерних элементов, которые не являются прямыми потомками?

#html #css #wordpress

#HTML #css #wordpress

Вопрос:

Вопрос, который я хочу задать: «Возможно ли / рекомендуется ли ссылаться на дочерний элемент элемента, который не является прямым дочерним элементом?»

Например, если у вас есть HTML, подобный этому: 

 <form class="formation">
   <p>
      <span>
         <input class="phone input">
      </span>
   </p>
   <p>
      <span>
         <input class="text input">
      </span>
   </p>
</form>

И вы хотите ссылаться в CSS на входные данные только в этой конкретной форме, поэтому вы вызываете класс формы, за которым следует класс входных данных, не ссылаясь на промежуточные элементы, например: 

 .formation .input {
    width: 10px;
}

будет ли это работать правильно?

Я склонен думать, что я уже делал это в проектах, и это работало должным образом, но обычно я ссылаюсь на всех промежуточных дочерних элементов (потому что я не углубляюсь так глубоко). Но в настоящее время я работаю над медиа-запросом для сайта WordPress, который, похоже, не соблюдает это правило. Это плохая практика? Или это совершенно неверно? Спасибо за вашу помощь!

Комментарии:

1. Да, это будет работать. И да, это правильный способ сделать это. Я не совсем уверен, что этот вопрос нужно было задавать. Любой учебник в Интернете покажет, что это правильно

2. это просто отлично.. но если вы действительно беспокоитесь об этом, просто дайте им уникальный класс вместо использования родительского / дочернего селектора

3. По определению дочерние элементы являются прямыми потомками, поэтому вопрос не имеет смысла. Вы хотели запросить синтаксис CSS для потомков, которые не являются дочерними элементами. И, очевидно, вы знаете ответ, но у вас где-то совершенно другая проблема.

Ответ №1:

Да, это не только возможно, но и желательно сделать это. Выберите селекторы для своих правил css настолько скудными, насколько это необходимо, чтобы уменьшить зависимость от вашей структуры разметки. Это целесообразно не только из соображений производительности, но и экономит вам немало работы на случай, если ваша разметка когда-либо изменится, например. позже вы заметите, что span больше не нужен, и вы удаляете его, чтобы сохранить разметку как можно более чистой. В случае, если вы использовали полный путь DOM к вашему .input, вам также придется настроить свои селекторы css. То же самое, если по какой-либо причине в будущем ваш <p> должен стать <div> .

Просто убедитесь, что вы предоставляете правилам столько контекста DOM, сколько необходимо, чтобы не применять свои правила к одному и тому же классифицированному элементу в других контекстах (если они у вас вообще есть, и если вы хотите применить к нему другой набор правил стиля).

Ответ №2:

Да, это будет работать нормально. То, что вы получили, допускает любое количество промежуточных узлов между двумя классами. .form .input

Если бы у .form > .input вас был, ваш CSS вообще не соответствовал бы. > является ли селектор «непосредственным потомком», поэтому

 .form .input { color: green }
.form > .input { color: red }

<div class="form">
   <div class="input">This is red</div>
   <div class="whatever">
      <div class="input">This is green</div>
   </div>
</div>