2016-05-20 4 views
0

Допустим, у нас есть общий класс css для таблицы, который будет использоваться во всех местах нашего приложения. Давайте рассмотрим также этот стиль имеет селектор первого ребенка.Пропустить стиль селектора первого для определенного элемента

tr td:first-child { ... } 

Я хотел был бы использовать этот класс для конкретной таблицы, но пропустить все стили первого ребенка.

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

Благодаря

+0

Я немного неясно, что вы имеете в виду. Скажем, например, 'tr td: first-child {...}' имеет желтый фон, вы хотите [1] применить класс к определенной таблице, где он не имеет желтого фона, то есть .. переопределить по умолчанию? Или [2] имеют класс, который дает всем клеткам красный фон, но первая ячейка все еще желтая? – Rhumborl

+0

сценарий 1 - это тот, который я задал на самом деле. Тем не менее, я хочу использовать этот класс для этой таблицы spesific, но просто не применяю желтый фон, как к первому дочернему селектору. Другие таблицы, которые используют этот класс, должны иметь желтый цвет как нормальное поведение. –

ответ

2

Вы могли бы быть более конкретными для данного конкретного table, предполагая, что он имеет класс или идентификатор можно использовать:

tr td:first-child { 
 
    color: red; 
 
} 
 
.test tr td:first-child { 
 
    color: green; 
 
}
<table> 
 
    <tr> 
 
    <td>First td</td> 
 
    <td>Second td</td> 
 
    </tr> 
 
</table> 
 

 
<table class="test"> 
 
    <tr> 
 
    <td>First td</td> 
 
    <td>Second td</td> 
 
    </tr> 
 
</table>

Извините ограниченной разметки, но вы понимаете. Поскольку класс .test tr td:first-child {} более специфичен, чем общий, он переопределяет его, но только для table с классом test.

Более подробная информация о специфичности: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

+0

Я вижу, что вы имеете в виду, создавая более классный класс для этой таблицы, но что, если я не хочу писать все стили снова и просто удалять селектор первого ребенка? –

+1

@kurt_vonnegut Нет простого способа сделать это, так как стили под общим «td: first-child» будут забираться на всех первых 'td', если не будут переопределены дальше по строке - это то, что я продемонстрировал в своем ответ... –

Смежные вопросы