Если у меня есть следующий div:
<div class="sectionA" id="content">
Lorem Ipsum...
</div>
Есть ли способ определить стиль, который выражает идею "A 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 трюки
Ну, как правило, вам не нужно классифицировать элемент, указанный id, потому что id всегда уникален, но если вам действительно нужно, должно работать следующее:
div#content.sectionA {
/* ... */
}
Нет ничего плохого в объединении id и класса на один элемент, но вам не нужно будет идентифицировать его как для одного правила. Если вы действительно этого хотите, можете:
#content.sectionA{some rules}
Вам не нужно div перед идентификатором, как предполагали другие.
В общем, правила CSS, специфичные для этого элемента, должны быть установлены с идентификатором, и те будут иметь больший вес, чем правила только класса. Правила, заданные классом, будут свойствами, которые применяются к нескольким элементам, которые вы не хотите изменять в нескольких местах, в любое время, когда вам нужно настроить.
Это сводится к следующему:
.sectionA{some general rules here}
#content{specific rules, and overrides for things in .sectionA}
Имеют смысл?
Вы можете комбинировать идентификатор и класс в CSS, но идентификаторы должны быть уникальными, поэтому добавление класса в селектор CSS будет чрезмерно квалифицировать его.
используйте: tag.id ; tag#class в переменных тега в вашем css.
Идентификаторы должны быть уникальными для документа, поэтому вам не нужно выбирать на основе обоих. Вы можете назначить элемент несколько классов, но с помощью class="class1 class2"
Я думаю, вы все ошибаетесь. Идентификаторы по сравнению с классом - это не вопрос специфичности; они имеют совершенно разные логические применения.
Идентификаторы должны использоваться для идентификации определенных частей страницы: заголовок, панель навигации, основная статья, авторская атрибуция, нижний колонтитул.
Классы должны использоваться для применения стилей к странице. Скажем, у вас есть общий сайт журнала. На каждой странице сайта будут одни и те же элементы - заголовок, nav, основная статья, боковая панель, нижний колонтитул. Но ваш журнал имеет разные разделы - экономика, спорт, развлечения. Вы хотите, чтобы три секции имели разные взгляды - экономически консервативные и квадратные, спортивные действия-y, развлечения яркие и молодые.
Для этого вы используете классы. Вы не хотите создавать несколько идентификаторов - # article-article и # sports-article и # entertainment-article. Это не имеет смысла. Скорее всего, вы бы определили три класса: экономику, спорт и .entertainment, затем определите идентификаторы #nav, #article и #footer для каждого.
.sectionA[id='content'] { color : red; }
Не будет работать, если doctype html 4.01, хотя...