Как совместить класс и идентификатор в селекторе CSS?

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

Ответ 2

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

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

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

Вы можете прочитать здесь css трюки

Ответ 3

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

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

Ответ 4

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

#content.sectionA{some rules}

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

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

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

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

Имеют смысл?

Ответ 5

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

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

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

Ответ 9

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

Не будет работать, если doctype html 4.01, хотя...