Как избежать применения селектора CSS к более чем одному уровню потомков

Question

Как мне запретить CSS применять мои стили, чтобы потомки потомков не давали им классы или идентификаторы? например,

#mycontent table {border: 1px solid red;}

Будет стилизовать правильную таблицу, а затем и ВСЕ таблицы внутри нее. Все, что я хочу, - это выбрать первую таблицу, а не все подтаблицы.

Answer 1

То, что вы описываете, это не каскад, это простое соответствие селектора.

Есть несколько подходов, которые вы можете использовать.

Первый - использовать более специфичный селектор. Если таблица, которую вы хотите оформить, является дочерней (а не внуком или другим более глубоким потомком), тогда вы можете использовать дочерний селектор вместо потомкового селектора. Это не поддерживается в MSIE 6.

#mycontent > table { border: 1px solid red; }

Второе - добавить больше информации в таблицы, которые вы действительно хотите стилизовать (с помощью идентификатора или класса).

#mycontent table.tableThatIWantToStyle {}

Третье - использовать каскад и по-разному стилизовать более глубоких потомков.

#mycontent table { border: 1px solid red; }
#mycontent table table { border: none; }

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

Answer 2

Вы можете использовать дочерний селектор:

#mycontent > table {border: 1px solid red;}

Проблема в том, что дочерний селектор не поддерживается в IE6. Если вам нужно поддерживать этот браузер, вам придется сделать что-то более неуклюжее:

#mycontent table {border: 1px solid red;}
#mycontent table table {border: none;}

В качестве альтернативы вы можете различать таблицы, используя классы, чтобы не получить этот каскадный эффект.

Answer 3

У меня была похожая дилемма, и вот как я обошел ее. Мое решение похоже на то, что другие опубликовали в отношении использования более конкретных селекторов для соответствующего соответствия.

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

<span class="boldText">
     some bolded text
     <span class="italicText">some italic text</span>
</span>

Другими словами, я хочу, чтобы он выглядел как " какой-то жирный текст некоторый курсивный текст " вместо " некоторый жирный текст некоторый курсивный текст "(и наоборот). Установив определенный селектор для очистки этих стилей на вложенных дочерних элементах, этого можно достичь следующим образом.

span span {
   font-weight:normal; /*clear bold style from 'cascading' by specifying it*/
   font-style:normal; /*clear italic style from 'cascading' by specifying it*/
}
.boldText {
   font-weight:bold;
}
.italicText {
   font-style:italic;
}

Селектор span span может гарантировать, что для вложенного диапазона будут установлены все стили, необходимые для переопределения обычно каскадного стиля из родительского диапазона, возвращая их в «нормальное» состояние без стилей. Затем будут применены конкретные классы boldText или italicText на самих участках, которые затем будут предоставлять содержимое этого диапазона либо жирным шрифтом, либо курсивом (или обоими), поскольку они являются более конкретными селекторами.

Удобство здесь в том, что мне больше не нужно беспокоиться о стиле форматирования шрифта при родительском каскадировании дочернего элемента. Я могу просто добавить соответствующий класс форматирования к любому диапазону и применить только этот класс без родительского.

Я мог бы так же легко добавить классы ".clearBold" и ".clearItalic" ко всем вложенным диапазонам, но это чище и привело к уменьшению кода в моем приложении.

Answer 4

Почему бы вам просто не присвоить этому тегу HTML-таблицы идентификатор mycontent и написать CSS следующим образом:

table#mycontent {
  border: 1px solid red;
}

Answer 5

Дайте вашему столу тип (класс):

table.mycontent {border: 1px solid red;}

Все дочерние таблицы не должны быть отмечены знаком .mycontent. Тогда стиль будет применен только к родительской таблице.