CSS Вопрос: Что такое предварительная оценка?

Question

Я не новичок в CSS, я просто не настолько разбираюсь в этом. Сегодня я столкнулся с проблемой, когда подэлемент перезаписывается css родителя. После некоторой царапины головы я понял, что мне нужно было добавить «! важно»в CSS (который, чтобы показать вам свою способность совершенно новый для меня)

(я поставил рабочий пример @, который показывает мой вопрос в живом цвете) http://jsfiddle.net/4RYM3/1/

#byIdName div{ /* #1 */ 
     margin: 30px; 
    background:#FF00FF; 
} 
div#ByIdNameTwo{ /* #2 */ 
      margin: 30px; 
    background:#00FF00; 
} 
div.idone{ 
    margin: 20px; 
    background:#FFFF00; 
} 
div.idtwo{ 
    margin: 0px; 
    background:#cccccc; 
} 
div.idone2{ 
    margin: 20px ! important; 
    background:#FFFF00 ! important; 
} 
div.idtwo2{ 
    margin: 0px ! important; 
    background:#cccccc ! important; 
} 

http://www.w3.org/TR/CSS2/cascade.html#specificity

Теперь, глядя на это, я не понимаю, почему # 1 и # 2, похоже, ведут себя по-другому (см. Ссылку jsfiddle выше).
В то время как я рад, что у меня это получилось (с ! Важно) Я потерялся относительно , почему # 1 и # 2 ведут себя так, как они есть.

Может ли кто-нибудь пролить свет на это поведение?

Это один из предпочтительных способов, а другой - сверху вниз, и если да, то почему (это мой главный вопрос)?

заранее спасибо

Answer 1

Они ведут себя по-разному, потому что #byIdName div относится к любым детям типа DIV с родительским #byIdName

Это div#ByIdNameTwo относится к любому DIV с ID #byIdNameTwo

Прямых детей использовать #byIdName>div

для детей, включая внучек великих детей .... и т. Д. использовать

#byIdName div 

Answer 2

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

Хотя это работает по-разному на основе конкретной реализации браузера.

Больше информации здесь: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Answer 3

эй taning, это немного трудно объяснить, но вот моя попытка:

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

поэтому, когда вы используете #byIdName div, он переопределяет класс '.idtwo' для любых div внутри элемента с идентификатором '#byIdName', поскольку объявление, начинающееся с идентификатора, более конкретное.

во втором случае, div#ByIdNameTwo относится только к div с этим идентификатором, не затрагивая дочерние div.

Я надеюсь, что это объяснит.

-также, я настоятельно рекомендую вам избежать важного правила, поскольку это яд для поддержки кода позже (и это показывает, что программист действительно не понимает каскадные правила). Я не имею в виду это как личное преступление, я любил !important сам, но его взломали и лучше избегали.

Answer 4

#byIdName div{ /* #1 */ 
     margin: 30px; 
    background:#FF00FF; 
} 

Этот блок кода целей только DIVS, которые находятся внутри элемента с «byIdName» атрибута.

div#ByIdNameTwo{ /* #2 */ 
      margin: 30px; 
    background:#00FF00; 
} 

Этот блок кода целей только DIV элемент, который имеет идентификатор «ByIdNameTwo». Если это не div с этим идентификатором, он будет проигнорирован.

Кроме того, селектор ID переопределяет селектор классов, поскольку он более конкретный. Добавление «! Important» исправит это, но это не рекомендуется. Использование «! Important» - это не практика, которую следует поощрять, когда есть лучшие альтернативы.

Лучшее решение было бы что-то вроде этого:

#ByIdNameTwo.idone2 { 
    margin: 20px; 
    background: #FFFF00; 
} 

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