`#parent span` стиль переопределения` .child span` стиль

Question

У меня есть случай, когда у меня есть .menu внутри #header и когда доступ .menu «s детей с помощью селектора CSS, как .menu a, он использует #header a вместо.

Я ожидал, что .menu a переопределить #header a, поскольку он ближе к элементу a. Почему это не происходит? Я предполагаю, что он имеет класс, сравнимый с id, основанный на приведенном ниже примере.

В примере, есть ли хороший способ переопределить #red span css в пределах .blue span без ограничения родительского стиля?

Под «хорошим способом» я полагаю, что я имею в виду гибкость. Например, .blue может быть элементом, созданным инфраструктурой php, которая используется во многих местах (возможно, не в родительском элементе, образованном идентификатором, или, возможно, в родительском стиле, созданном на другом идентификаторе).

Адрес example. Все, кроме #green еще будет красным:

HTML:

<div id="red"> 
    <span>red</span> 
    <div class="blue"> 
     <span>blue(class) - should be blue</span> 
    </div> 
    <div id="green"> 
     <span>green(id) - should be green</span> 
    </div> 
    <div class="green"> 
     <span>green(class) - should be green</span> 
    </div> 
    <div> 
     <span>no child div style - should still be red</span> 
    </div> 
</div> 

CSS:

#red span { 
    color: red; 
} 
.blue span { 
    color: blue; 
} 
.green, #green span { 
    color: green; 
} 

Answer 1

приоритет применения правила CSS (без !important) является:

1. Количество идентификаторов в селекторе. Если ничья,
2. Количество атрибутов и классов. Если ничья,
3. имена или псевдоэлементы. Если ничья,
4. последнее объявление в файле CSS. Это, конечно, никогда не рисует.

С #red span имеет идентификатор, и .green не имеет какого-либо, #red span применяется.

Для дальнейшего объяснения которых правила CSS является первым применить, проверить это nice article on smashing magazine

Чтобы обойти, вы можете use a more specific rule. Таким образом, он становится привязанным к первому, но поскольку у него есть дополнительные классы, ваше правило выигрывает из-за второго.

Answer 2

Selector специфика диктует, что идентификатор имеет приоритет над классом. Несмотря на то, что синий класс после красного цвета в каскаде, красный имеет приоритет из-за специфики. Вы можете использовать селектор #red .blue span при необходимости

Answer 3

самый простой и чистый:

http://jsfiddle.net/f4ke2/7/

#red { 
    color: red; 
} 
.blue span { 
    color: blue; 
} 
.green, #green span { 
    color: green; 
} 

ИЛИ Что делать, если вы сделаете это?:)

#red > span { 
    color: red; 
} 

ИЛИ

#red .blue span {color: blue;} 

ИЛИ

.blue span { 
    color: blue !important; 
} 

ИЛИ для "гибкости"

#red .blue span, .blue span, #someotherID .blue span {color: blue;} 

или что-то, как ужасно, как это

var id = $("#red"); 
id.addClass(id.attr("id")).removeAttr("id"); 

Answer 4

Если вы используете таблицы стилей (в каркасе или иначе), которые присваивают свойства элементам по классу, то есть с помощью селекторов классов, вы просто должны учитывать это при написании других правил CSS. Так что это вопрос дисциплинированного кодирования (HTML и CSS), а не использование какого-либо трюка, чтобы избавиться от обычных принципов CSS.

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

Например, если есть таблица стилей с .foo { color: blue }, это повлияет на любой элемент класса foo, если только это не переопределено другим правилом в соответствии с каскадом CSS. Поэтому, если вы не хотите, чтобы это было переопределено в такой ситуации, как <div id=xxx>...<span class=foo>...</span>...</div>, вы просто не можете установить #xxx span { color: red }, потому что тогда вы переопределите это правило в силу более конкретного селектора. Использование #xxx { color: red } было бы безопасным в этом смысле, поскольку span (имеющий свой набор цветов) не наследует цвет своего родителя.

Использование !important как в .foo { color: blue !important } может показаться проблемой, но !important упрощает управление таблицами стилей. Это также создает проблемы, когда вам нужен инструмент для переопределения эффекта специфичности, но он не может, потому что вы уже стреляли из оружия. Правило .foo { color: blue !important } не действует против #xxx span { color: red !important }.