深山老林

2006-04-24[原]属性选择符的优先级

大家都知道样式定义存在优先级的问题，像“ID选择符”的优先级就比“样式选择符”要高等等。在写完《[原]属性选择符的使用》和《[原] CSS样式的优先级补遗2》后才发现，原来属性选择符的优先级是比较特殊的，看看下面的例子：

------------------------------CSS-----------------------------------
/*IE*/
div{float:left;color:Orange;} 特性值为：1
.left{color:Aqua;} 特性值为：10
div div.right{color:Fuchsia;} 特性值为：12

/*FF*/
div[title=left]{color:Blue;}
div[title=right]{color:Gray;}
--------------------------------------------------------------------

----------------------------HTML------------------------------------
<div>
  <div class="left" title="left">
    <dl>
     <dd>dd1</dd>
     <dd>dd2</dd>
     <dd>dd3</dd>
    </dl>
  </div>
  <div class="right" title="right">
    <dl>
      <dd>dd4</dd>
      <dd>dd5</dd>
      <dd>dd6</dd>
    </dl>
  </div>
</div>
--------------------------------------------------------------------

在FF中可以看到，第一个层里的文字是蓝色的，而第二个层里的粉红色的。所以不难得出，属性选择符的特性值是在10到12之间，姑且写为11吧，以方便表示。

2006-04-21[原] CSS样式的优先级补遗2

今天看到一篇《深入了解CSS的继承性及其应用》，文章中提到了CSS的特性值

---------------------------引用文字--------------------------------------
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表：

H1 {color:blue;} 特性值为：1
P EM {color:purple;} 特性值为：2
.apple {red;} 特性值为：10
P.bright {color:yellow;} 特性值为：11
P.bright EM.dark {color:brown;} 特性值为：22
#id316 {color:yellow} 特性值为：100

从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。
-------------------------------------------------------------------------

可能不太好理解，按照上面的权重顺序，先统计ID，再统计CLASS，再统计HTML标记。即：

-------------------------------------------------------------------------
H1 {color:blue;} 特性值为：1
P EM {color:purple;} 特性值为：1+1=2
.apple {red;} 特性值为：10
P.bright {color:yellow;} 特性值为：10+1=11
P.bright EM.dark {color:brown;} 特性值为：10+10+1+1=22
#id316 {color:yellow} 特性值为：100
-------------------------------------------------------------------------

可以看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100。在文章中还提到了继承的权重为0。

文章中提到一个小技巧：

---------------------------------引用文字---------------------------------
如果想让H1始终为黑色，而EM文字在其他情况下红色，那么下面的样式表设置就是一个很好的方法：

H1，H1 EM {color:black;} 特性值为：1，2
EM {color:red;} 特性值为：1

给定这个规则后，除在H1元素内的任何EM文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条有效的规则（一条是对H1的，另一条是对H1 EM的）也就有两个特性值——每条规则一个。
-------------------------------------------------------------------------

这个技巧很有意思，HTML是这样的：

-------------------------------HTML--------------------------------------
<H1>黑色的H1<EM>黑色的EM</EM></H1>
<EM>红色的EM</EM>
-------------------------------------------------------------------------

也许你会说是不是跟上面的CSS样式顺序有关系呢？可以试试改成：

---------------------------------改后样式--------------------------------
EM {color:red;} 特性值为：1
H1，H1 EM {color:black;} 特性值为：1，2
-------------------------------------------------------------------------

效果还是一样的。这也解释了为什么“包含选择符(E1 E2)”的优先级比“类型选择符(E)”要高。

这一点对于在写样式时是很有帮助的，比如我们可以在定义列表的时候用到：

-------------------------------------------------------------------------
ul{color:red;}
ul li{color:green;}
div ul{color:orange;}
div ul li{color:blue;}
-------------------------------------------------------------------------

这样就可以在不用增加像“id=XX”、“class=xxx”等属性的情况下对标签进行分别定义了。

2006-03-09[原] CSS样式的优先级补遗

以前写过一篇《关于CSS样式的优先级问题》，当时由于对浏览器的兼容性问题没有太多的了解，所用到的例子也没有提到与浏览器相关的内容，在此做一下补充：

在此要特别提到!important声明，下面还是用以前的那个例子：

-----------------------------------------
<style type="text/css">
<!--
#aaa{
   background-color: Fuchsia;
}
.aaa{
   background-color: Black;
}
td{
   background-color: Aqua !important;
}
-->
</style>
<table>
<tr>
<td class="aaa" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------

td将会显示为Aqua，这在IE4+的浏览器与支持!important声明的都是正确的，但如果换成这下这样：

-----------------------------------------
<style type="text/css">
<!--
#aaa{
   background-color: Fuchsia;
}
.aaa{
   background-color: Black;
}
td{
   background-color: Aqua !important;
   background-color: Green;
}
-->
</style>
<table>
<tr>
<td class="aaa" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------

这个例子的结果是在IE4+的浏览器中td的颜色为Blue，而在FF中的颜色为Aqua 。这说明了在IE4+浏览器中的!important声明并不是“真正的提高优先级”，或说是“不完全的声明”，在声明之后如果有新的、相同属性名的定义，!important声明将会失效。而在FF中，!important声明在同个样式类中的优先级始终是最高的。

因此，当要修正IE与FF中的差异时，就可以使用第二个例子中的做法，大多数是用于修正定位的问题。

2005-10-19[原] 关于CSS样式的优先级问题

在CSS中，你可以为同一个标签定义多个样式，如下面的例子：

------------------------------例子----------------------------
<style type="text/css">
<!--
#aaa{
   background-color: Fuchsia;
}
.ab{
   background-color: Black;
}
td{
   background-color: Aqua ;
}
-->
</style>
<table>
<tr>
<td class="ab" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------------------

这么多的样式，哪个是有效的呢？
我们一个一个把上面的样式删除，在浏览器中可以看到：
style的优先级最高，然后是id，再来是class，最后才是td
另外，使用!important可以改变优先级别为最先，如下：

-----------------------------------------
<style type="text/css">
<!--
#aaa{
   background-color: Fuchsia;
}
.ab{
   background-color: Black;
}
td{
   background-color: Aqua !important;
}
-->
</style>
<table>
<tr>
<td class="ab" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------

td将会显示为Aqua
即优先级变为td，然后是style，再来是id，最后是class

注：谢谢QQ48251710的朋友指出了文章中的一个错误，现已经改正。