为什么要写这篇文章是因为
<html>
<style type="text/css">
body h1 {
color: green;
}
html h1 {
color: purple;
}
</style>
</head>
<body>
<h1>Here is a title!</h1>
</body>
</html>
上面代码执行结果是这样的。按照我的理解，body在DOM中比html近，应该会按body h1中定义的绿色来显示文字，但是恰恰相反，文字颜色是紫色的。
原因现在我当然是知道的，因为css中优先级无视DOM树中节点的距离远近，就是说DOM树中的距离不会对元素优先级计算产生影响。如果优先级相同，靠后的 CSS 会应用到元素上。而html h1靠后，当然是紫色了，如果调换html h1和body h1顺序那就是绿色了。
以上我刚开始犯的错误，其实是被继承样式给唬住了，但是继承的样式是低于设定的样式的。如果只是继承，那离的近的当然优先级高，比如举个例子：
<html>
<style type="text/css">
#close{
color: green;
}
#further{
color: purple;
}
</style>
</head>
<body>
<div id="further">
<div id="close">
<h1>Here is a title!</h1>
</div>
</div>
</body>
</html>
不管#close和#further顺序，文字都是绿色的。
接下来就系统的看看css优先级。
一、优先级
浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。
内联》ID选择器》伪类》属性选择器》类选择器》元素选择器【p】》通用选择器(*)》继承的样式
二、优先级计算：
上面说了，优先级仅有选择器决定，怎么个计算方法呢？
a、用a表示选择器中ID选择器出现的次数
b、用b表示类选择器，属性选择器和伪类选择器出现的总次数。
c、用c表示标签选择器、伪元素选择器出现的总次数
d、忽略通用选择器
e、然后计算a*100+b*10+c的大小，这就是优先级了。
权重：内联样式1000》id选择器100》class选择器10》标签选择器1
Note:
ID选择器「如：#header」，Class选择器「如：.foo」，属性选择器「如：[class]」，伪类「如：:link」，标签选择器「如：h1」，伪元素「如：:after」，选择器「*」
接下来从以下几点深入分析优先级。
1、优先级计算无视DOM树中的距离
开头说明的例子：
<html>
<style type="text/css">
body h1 {
color: green;
}
html h1 {
color: purple;
}
</style>
</【LeetCode OJ】Remove Element - 温布利往事 阅读原文»
题目：Given an array and a value, remove all instances of that value in place and return the new length.
The order of elements can be changed. It doesn't matter what you leave beyond the new length.
代码：
2 {
3 public:
4 int removeElement(int A[], int n, int elem)
5 {
6 for (int i = 0; i < n; ++i)
7 {
8 if (A == elem)
9 {
10 for (int j = i; j < n; ++j)
11 {
12 A[j] = A[j+1];
13 }
14 n--;
15 i--;
16 }
17 }
18 return n;
19 }
20 };
本文链接：【LeetCode OJ】Remove Element，转载请注明。
没有评论:
发表评论