Как совместить класс и ID в селекторе CSS?

Question

Если у меня есть следующий div:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

Есть ли способ определить стиль, который выражает идею "div с id='content' AND class='myClass'"?

Или вы просто идете тем или иным путем, как в

<div class="content-sectionA">
    Lorem Ipsum...
</div>

Или

<div id="content-sectionA">
    Lorem Ipsum...
</div>

Answer 1

В вашей таблице стилей:

div#content.myClass

Редактировать: Это тоже может помочь:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

и, по вашему примеру:

div#content.sectionA

Редактировать, 4 года спустя: Так как это очень старое и люди продолжают его находить: не используйте tagNames в ваших селекторах. #content.myClass быстрее, чем div#content.myClass, потому что tagName добавляет шаг фильтрации, который вам не нужен. Используйте tagNames в селекторах только там, где вы должны!

Answer 2

Существуют различия между #header .callout и #header.callout в css.

Вот "простой английский" из #header .callout:
Выберите все элементы с именем класса callout, которые являются потомками элемента с идентификатором header.

А #header.callout означает:
Выберите элемент с идентификатором header, а также имя класса callout.

Вы можете прочитать больше здесь css tricks

Answer 3

Нет ничего плохого в объединении идентификатора и класса в одном элементе, но вам не нужно идентифицировать его по обоим правилам. Если вы действительно хотите, вы можете сделать:

#content.sectionA{some rules}

Вам не нужно div перед удостоверением личности, как предлагали другие.

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

Это сводится к следующему:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

Имеет смысл?

Answer 4

Ну, как правило, вам не нужно классифицировать элемент, указанный в id, потому что id всегда уникален, но если вам действительно нужно, должно работать следующее:

div#content.sectionA {
    /* ... */
}

Answer 5

Вы можете комбинировать идентификатор и класс в CSS, но идентификаторы должны быть уникальными, поэтому добавление класса в селектор CSS может привести к его переопределению.

Answer 6

используйте: tag.id ; tag#class в теге переменных в вашем CSS.

Answer 7

Я думаю, что вы все не правы. Идентификаторы в сравнении с классом не вопрос специфики; у них совершенно разные логические применения.

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

Классы должны использоваться для применения стилей к странице. Допустим, у вас есть общий сайт журнала. Каждая страница на сайте будет иметь одинаковые элементы - заголовок, навигация, основная статья, боковая панель, нижний колонтитул. Но в вашем журнале есть разные разделы - экономика, спорт, развлечения. Вы хотите, чтобы эти три раздела выглядели по-разному: экономичная и скромная, спортивная, спортивная, яркая и молодая.

Вы используете классы для этого. Вам не нужно создавать несколько идентификаторов - # economics-article и # sports-article и # entertainment-article. Это не имеет смысла. Вместо этого вы должны определить три класса: .economics, sports и .entertainment, а затем определить идентификаторы #nav, #article и #footer для каждого.

Answer 8

.sectionA[id='content'] { color : red; }

Не будет работать, если тип документа html 4.01, хотя ...

Answer 9

Идентификаторы должны быть уникальными для всего документа, поэтому вам не нужно выбирать их на основе обоих. Вы можете назначить элементу несколько классов, хотя с помощью class="class1 class2"