it-swarm.com.ru

селекторы CSS для применения правил к нескольким классам схожих элементов

У меня простой стол

<tr>
     <td class="first">I am the first</td>
     <td class="second">You are the second</td>
     <td class="third">He is third</td>
     <td class="fourth">Someone else is fourth</td>
     <td class="fifth">That guy is fifht</td>
     <td class="sixth">Who care's about sixth</td>
</tr>

Я хочу применить правила CSS к некоторым классам только в тд. Я могу написать что-то вроде

td.first, td.fourth, td.fifth
{
    color:purple;
}

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

Мое беспокойство: Это браузер, будет искать все классы, а затем искать тд для каждого запятой разделения. Это означает, что он собирается найти все три класса и затем оценить тег. Есть ли способ, которым браузер найдет все три класса, а затем сопоставит тэг, кроме использования одного класса.

10
KhanSharp

Решение вашей проблемы

Вы заявляете:

Мое беспокойство: браузер, будет искать все тд для каждой запятой разделение и найти класс соответствия. Это означает, что он собирается найти все тд теги три раза. Если это правда, как я могу сделать браузер для поиска для тэгов один раз, а затем найти совпадения классов.

Но это не то, как оценивает css, как это происходит справа налево . В случае, если вы даете:

td.first, td.fourth, td.fifth
{
    color:purple;
}

Таким образом, он не будет искать «три раза» через элементы td. Скорее, он будет соответствовать классу .first в вашем документе (где бы он ни находился), затем проверьте, применяется ли он к элементу td, и, если это так, соответствует. Затем оцените .fourth и т.д. Аналогичным образом.

Таким образом, если ваша задача состоит в итерации элементов td, то ваша задача недействительна. Ваш код эффективен как есть.

19
ScottS

Для определенных свойств вы можете создать отдельные классы . Например, в вашем случае вы можете создать класс .color и написать так:

<tr>
     <td class="first color">I am the first</td>
     <td class="second">You are the second</td>
     <td class="third">He is third</td>
     <td class="fourth color">Someone else is fourth</td>
     <td class="fifth color">That guy is fifht</td>
     <td class="sixth">Who care's about sixth</td>
</tr>

.color{color:purple;}
3
Hiral

Вы можете использовать свойство : nth-child для достижения того же самого, не передавая все эти разные классы своим TD.

то есть:

td:nth-child(1), 
td:nth-child(4), 
td:nth-child(5) {
    color:purple;
}
0
silicakes