CSS和样式顺序

Question

我试图解决这个问题,请考虑以下风格:

.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的内容是居中而不是左对齐的？

但是当我在样式表中的"form_container_header"类下面移动"text_left"类时,它会对齐吗？

谢谢

Answer 1

因为它们都具有相同的特异性(仅引用类),所以文件末尾的那个具有先例.如果你要.text_left成为div.text_left,那么它更具体,.form_container_header无论文件在何处都会覆盖.

来自W3C:

6.4.3计算选择器的特异性

选择器的特异性计算如下:

• 如果声明来自的是一个'style'属性而不是一个带选择器的规则,则为1;否则为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中.

连接四个数字abcd(在具有大基数的数字系统中)给出了特异性.

一些例子:

 *             {}  /* 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,因为它具有更高的特异性.