是否有特定的CSS属性顺序?
例如,如果我写的:是否有特定的CSS属性顺序?
background-color: black; color: white;
或
color: white; background-color: black;
有两个,我应该关心的秩序之间有什么区别?
回答:
不可以。您可以按任意顺序书写。在同一选择器内重复的情况下,最后一条规则获胜。
p { color:blue;
color:red;
color:green; /* Green wins */
}
当处理多个选择器时,稍后的规则将覆盖较早的规则,除非较早的选择器更具体。
例如,该代码将关闭所有的段落绿色:
p { color:red; } /* ... */
p { color:green; }
尽管此代码将关闭所有的段落红色,因为第一选择是更具体。
body p { color:red; } /* ... */
p { color:green; }
虽然规则选择中的顺序可能并不重要,我会照顾(着色规则之前上浆规则之前位置的规则,例如)把它们写在可预知的顺序只是为了让你的CSS一致,保持稍微愉快一点。
回答:
在你的例子中没有区别,但订购可以重要,但只在极少数情况下。
例如,它有时是常见的事:
display: block; display: inline-block;
解析器将始终从顶部到解释时,底部的样式是相同的规则。在这种情况下,inline-block
将覆盖block
,因为属性名称相同。
但是:
ul li{ font-size: 14px;
}
ul{
font-size: 12px;
}
在这种情况下,即使12px
进来规则14px
后,在列表项元素的文本将14px
因为选择ul li
超过ul
回答:
一些风格指南建议使用alphabetizing CSS样式。这有助于避免重复属性定义产生的错误。
回答:
background: none no-repeat 0 0 #ccc; background-color: #eee;
background-color will be #eee
......应该照顾这样的情况...对于其他情况下的顺序无关紧要。
具有一组值及其简单子属性复杂性 - 你应该仔细prceed:margin, padding, background
...等
回答:
只有时间顺序问题是覆盖与HTML父/子元素节点或多个类,如下所示。或者如Meagar所说,如果您有多个描述同一类的相同类型的属性。最后一个将占主导地位。所以文本颜色将是白色或#fff。
.classname {
color:#000;
}
.classnameTwo
{
color:#fff;
}
示例html。
<div class="classname classnameTwo">Color text </div>
回答:
声明的顺序在声明影响同一属性的程度上很重要。通过cascade rules,后者指定胜利,其他条件相同。
因此,在该示例中,由于声明会影响不同的属性,因此顺序没有影响。但例如在声明
font: 100% Calibri; font-weight: bold;
的顺序是显著,因为双方的声明设置font-weight
(为不同的值)。同样,在
background: white; backround-image: url(bg.png);
该命令是重要的;如果顺序颠倒过来,将不会有背景图像,因为background
速记设置了所有背景属性,包括background-image: none
在这种情况下。
(此总结和扩大我的回答这个问题的一个duplicate)
以上是 是否有特定的CSS属性顺序? 的全部内容, 来源链接: utcz.com/qa/262612.html