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

BUT 当我将“text_left”类移到样式表中的“form_container_header”类下面时，它会左对齐？

谢谢

Answer 1

因为它们都具有相同的特异性（仅引用类），所以文件末尾的那个具有先例。如果您要.text_left为div.text_left，那么它更具体，无论文件位于何处，都会覆盖.form_container_header。

来自W3C：

6.4.3计算选择者的特异性

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

如果声明来自的是1，则是一个'style'属性而不是带有选择器的规则，否则为0（= a）（在HTML中，元素的“style”属性的值是样式表规则。这些规则有没有选择器，所以a = 1，b = 0，c = 0，d = 0.）
计算选择器（= 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，因为它具有更高的特异性。

Answer 2

当您编写类似“text_left”的样式时，您可能想要使用！important。这将覆盖设置该值的任何其他样式。

以下作品。


.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.

Answer 3

我的调用是因为.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

Answer 4

以下是有关CSS特异性的一些信息。我发现这个主题并没有得到很好的理解，理解它会为你节省大量的时间。

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

Answer 5

查看css cascade上maxdesign的这些精彩幻灯片

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

Answer 6

我不知道我是否正确（事实上，我没有任何证据证明此事件只有碎片内存...）但我认为这与级联有关。重要性的大小如下：

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

嗯......我可能只是在喃喃自语。如果是这样，请道歉。

CSS和样式顺序

6 个答案: