说说ID选择符、类选择符和HTML标记选择符的优先级顺序

时间:2023-03-09 07:45:05
说说ID选择符、类选择符和HTML标记选择符的优先级顺序

ID选择符、类选择符和HTML标记选择符三者之间的优先级顺序是:ID选择符>类选择符>HTML标记选择符,但是可以用!important提升优先权。

  如:       p{color:#f00 !important}       /*(注#f00是红色)*/

    .blue{color:#00f}

    #yellow{color:#ff0}

此时p标签的内容显红色(firefox中的显示效果,ie6important支持不好),优先级最高。

 

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">

<head>

<title>优先级</title>

<style href="text/css">

p{color:#f00 !important}       /*(注#f00是红色)*/

.blue{color:#00f}

#yellow{color:#ff0}

</style>

</head>

<body>

<p class="blue" id="yellow">jafkaj</p>

</body>

</html>

当去掉css中p标签的!important,同样的代码,字体显示黄色(firefox中的显示效果),此时ID选择符优先级最高。

当去掉css中p标签的!important,再把<p class="blue" id="yellow">jafkaj</p>改为<p class="blue">jafkaj</p>,其他代码不变,字体显示蓝色(firefox中的显示效果),说明类选择符的优先级比HTML标记选择符高。

以上实例很好的说明了ID选择符、类选择符和HTML标记选择符三者优先级的高低顺序,ID选择符优先级高于类选择符,类选择符的优先级高于HTML标记选择符。

转载收藏:http://www.cnblogs.com/longzhiyi/archive/2009/09/25/1573900.html