CSS и порядок стилей - PullRequest
2 голосов
/ 16 июля 2009

Я пытаюсь понять это, пожалуйста, обратите внимание на следующие стили:

.text_left
{
text-align:left;
}

.text_right
{
text-align:right;
}

.text_cen
{
text-align:center;
}

.form_container_header
{

width:95%;
margin-left: auto ;  
margin-right: auto ;
margin-bottom:35px;
text-align:center;
}

Теперь, когда я применяю эти стили к моему DIV, вот так:

<div class="form_container_header text_left">

Может кто-нибудь объяснить мне, почему содержимое DIV центрировано, а не выровнено по левому краю?

НО когда я перемещаю класс «text_left» ниже класса «form_container_header» в таблице стилей, он выравнивается по левому краю?

спасибо

Ответы [ 6 ]

6 голосов
/ 16 июля 2009

Поскольку оба они имеют одинаковую специфику (только ссылающийся на класс), у одного в конце файла есть прецедент. Если вы сделаете .text_left be div.text_left, то он будет более конкретным и переопределит .form_container_header независимо от того, где он находится в файле.

С W3C :

6.4.3 Расчет специфичности селектора

Специфика селектора рассчитывается следующим образом:

  • count 1, если декларация from является атрибутом 'style', а не правилом со селектором, 0 иначе (= a) (В HTML значения атрибута "style" элемента являются правилами таблицы стилей. Эти правила имеют селекторов нет, поэтому a = 1, b = 0, c = 0 и d = 0.)
  • подсчитать количество атрибутов ID в селекторе (= b)
  • подсчитать количество других атрибутов и псевдоклассов в селекторе (= c)
  • подсчитать количество имен элементов и псевдоэлементов в селекторе (= d)

Специфика основана только на форме селектора. В частности, селектор в форме «[id = p33]» считается селектором атрибута (a = 0, b = 0, c = 1, d = 0), даже если атрибут id определен как «ID» "в DTD исходного документа.

Объединение четырех чисел a-b-c-d (в системе счисления с большой базой) дает специфичность.

Некоторые примеры:

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
  #x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

В приведенном выше примере цвет элемента P будет зеленым. Объявление в атрибуте «style» переопределит объявление в элементе STYLE из-за каскадного правила 3, поскольку оно имеет более высокую специфичность.

2 голосов
/ 16 июля 2009

Когда вы пишете стиль, такой как "text_left", вы можете использовать! Важный. Это переопределит любые другие стили, которые устанавливают это значение.

Следующие работы.


.text_left
{
text-align:left !important;
}

.text_right
{
text-align:right !important;
}

.text_cen
{
text-align:center !important;
}

.form_container_header
{

width:95%;
margin-left: auto ;  
margin-right: auto ;
margin-bottom:35px;
text-align:center;
}

<div class="form_container_header text_left">


EDIT: Please read the comments on this answer before doing this. There are some concerns about using !important recklessly.

1 голос
/ 16 июля 2009

Ознакомьтесь с этими великолепными слайдами из maxdesign на css cascade

http://www.maxdesign.com.au/2009/06/30/css-cascade

1 голос
/ 16 июля 2009

Вот некоторая информация о специфике CSS. Я считаю, что эта тема не очень хорошо понята, и ее понимание сэкономит вам кучу времени.

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

1 голос
/ 16 июля 2009

Мой вызов будет вызван тем, что .form_container_header определен в конце файла, последний определен имеет приоритет (это не единственное правило приоритета, но в данном случае это правило применяется)

Редактировать: вот как я это сделаю (удалено определение выравнивания текста в form_container)

.text_left
{
text-align:left;
}

.text_right
{
text-align:right;
}

.text_cen
{
text-align:center;
}

.form_container_header
{

width:95%;
margin-left: auto ;  
margin-right: auto ;
margin-bottom:35px;

}

<div class="form_container_header text_left">

РЕДАКТИРОВАТЬ 2: Все это называется каскадом CSS. Вы можете найти ссылку здесь: http://www.w3.org/TR/CSS2/cascade.html и классную статью здесь http://reference.sitepoint.com/css/cascade

0 голосов
/ 16 июля 2009

Я не знаю, прав ли я (на самом деле, у меня нет никаких доказательств, только фрагменты фрагментированной памяти по этому вопросу ...), но я подумал, что это связано с каскадом. Шкала важности выглядит примерно так:

stylesheet element
stylesheet class
stylesheet id
document defined stylesheet element
document defined stylesheet class
document defined stylesheet id
inline style attribute

Хм ... Я просто бормочу. Извиняюсь, если это так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...