Как объединить класс и ID в селекторе CSS?

Если у меня есть следующий 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>

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

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 в селекторах только там, где это необходимо!

Есть различия между #header .calloutи #header.calloutв CSS.

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

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

Вы можете прочитать больше здесь трюки CSS

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

#content.sectionA{some rules}

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

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

Это сводится к этому:

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

Есть смысл?

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

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

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

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

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

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

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

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

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

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

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