Могу ли я по-разному создать стиль имени класса для разных идентификаторов?

Question

Я думаю (?) Я могу продолжать многократно использовать одну и ту же группу имен классов, но пусть они выполнят разные стили для разных идентификаторов, написав одну таблицу стилей для разных историй следующим образом:

.bg #story1 {background-color:#ccffff;}
.bg #story2 {background-color:#ffffff;}
.marginL #story1 {margin-left:30px;}
.marginL #story2 {margin-left:20px;}
.accentcolor #story1 {color:#ff00cc;} 
.accentcolor #story2 {color:#00ff66;} 
 etc, etc,

Или это написано в обратном порядке, например:

#story1 .bg {background-color:#ccffff;} ?

Но я думаю, что нет, потому что браузер будет видеть только первое упоминание данного идентификатора и игнорировать остальные классы, так как страницадолжен иметь только одно вхождение данного идентификатора.Правильно?

Или было бы выгодно по какой-то причине маркировать каждый загружаемый сюжет div по классу вместо id?Если я использую описанный выше метод, сможет ли браузер ссылаться на правильную «версию» данного класса, если я напишу HTML-код для данной истории, подобной этой?

<div id="story1" class="marginL bg fontcolor">...</div>

Только одна история будет когда-либопоявляются одновременно, каждый из них загружается через jQuery в раздел приемника, который предварительно очищается от всех классов стилей страницы, за исключением class = "container".Возможно, есть более элегантный способ назначить стилизацию каждой загруженной истории, не прибегая к записи всего в виде строки в .css (......) ??Или мне следует сначала вызвать .load отдельной таблицы стилей, в которой jQuery записывает ее между тегами стилей над содержимым истории?найти только упоминание элементов в сочетании с именами классов, например:

h1, h2, h3 .myStyle {font...color..etc}

Answer 1

Ваше предположение, что #story1 .bg соответствует только одному вхождению, неверно. Здесь вы используете отношение «потомок» ср. Шпаргалка CSS3 , поэтому это правило будет применяться к любому элементу с классом 'bg', который является потомком элемента с идентификатором 'story1'.

Относительно ваших вопросов о том, как создать свой контент. Хотя я могу только догадываться, как будет выглядеть ваш конечный результат, некоторые общие советы:

• использовать идентификаторы для того, что они есть: уникальные элементы
• использовать классы для повторно используемых стилей, элементов, которые подпадают под определенную "категорию"
• старайтесь избегать классов, которые смешивают чистую эстетику визуального дизайна со свойствами, уникальными для определенных видов элементов, но скорее пытайтесь сгруппировать их по семантике контента

Чтобы объяснить последнее: вам следует избегать использования таких классов, как «книга-два-пикселя-слева» и «зеленый-цвет-история-с-границей влево», а скорее сосредотачиваться на содержимом элементов , создавая классы для «книги» и «истории» и разделяя их общие черты в этих классах. Следование этому принципу делает ваш CSS гораздо более удобным для поддержки в долгосрочной перспективе. Использование чисто визуальных классов само по себе неплохо, но если вы используете их, вы должны четко отделить их от «семантических» классов и сохранить их свойства минимальными.

Так что в вашем случае с «историями» хорошим началом было бы придумать класс «истории». Он соответствует требованиям - у вас есть несколько историй, которые наверняка будут иметь некоторые общие черты, и он достаточно точно представляет семантику. Если четко разделены, вы можете объединить семантические классы с чисто функциональными классами:

<div class="story border-on-top"/>
<div class="story"/>
<div class="story border-on-bottom"/>

Answer 2

Я не уверен, что понимаю ваш вопрос, но приведу несколько примеров

<div id="story1" class="marginL bg fontcolor">...</div> будет выбрано #story1.bg (без пробела) или иначе .bg#story1 - однако, лучшие практики будут #id.class

Пробелы следует использовать только при указании дополнительных вложенных элементов:

<div id="story1" class="marginL bg fontcolor"><span class="story"></span></div> будет выбран div#story1.bg span.story. Если вы говорите об одних и тех же элементах, держите их все вместе.

<div><span><em> будет выбран в следующем порядке: div span em

Если вы укажете .bg {background-color: red;}, а затем #story1.bg {background-color: blue}, цвет фона для story1 будет синим, если вы поместите эту строку после первоначального вызова .bg (или если вы используете оператор !important.

Помните: идентификаторы должны представлять только ОДИН элемент и должны быть уникальными. Классы могут быть использованы несколько раз. Например, если бы у вас было несколько отдельных новостных сообщений из CNN, Fox News и ABC News, вы бы получили:

<div id="cnn" class="news_post">...</div>
<div id="foxnews" class="news_post">...</div>
<div id="abcnews" class="news_post">...</div>

Идентификаторы являются уникальными элементами, где news_post может представлять множество новостных сообщений.

Answer 3

Неправильно,

в CSS E F соответствует любому элементу F, который является потомком элемента E.

Для уникальных элементов используйте id с, для повторных элементов - class es. Если вы хотите поделиться атрибутом вашего стиля между повторяющимися элементами, вы можете использовать один и тот же класс, но обернуть их в включающий элемент, имеющий определенный идентификатор или класс, и использовать составной селектор:

Селекторы соответствия шаблону CSS2.

Answer 4

Вы почти правы, в этом вы можете указать

.bg { background-color: red; }

А затем используйте:

#story1.bg { background-color: blue; }
#story2.bg { background-color: green; }

Но так как вам придется каждый раз переопределять background-color (или другие атрибуты), это лишит смысла определение этого атрибута в имени класса (так как он будет переопределяться снова и снова ). Поскольку вы пытаетесь по-разному стилизовать background-color (или что-то еще) на основе id элемента, к которому присоединен класс, вы обнаружите, что он более лаконичен (и, я думаю, более понятным) для примените background-color в id -селекторе вместо:

.bg { /* styles for elements of class 'bg' */ }

#story1 { background-color: blue; }
#story2 { background-color: green; }

Особенно потому, что класс в css действительно выгоден только для стиля нескольких элементов в одном месте, в отличие от использования id, который предназначен для стилизации отдельных элементов по одному.