在两个或多少CSS规则应用于同元素上时,不同级别的优先顺序从到高低是？

html-css027

在两个或多少CSS规则应用于同元素上时,不同级别的优先顺序从到高低是？,第1张

在看css选择器优先级顺序前，我们先来简单说说css基本选择器有哪些?1.标记选择器(如：body,div,p,ul,li)2.id选择器(如：id=“name”,id=“name_txt”)3.类选择器(如：id=“name”,id=“name_txt”)4.后代选择器(如：#head .nav ul li 从父集到子孙集的选择器)5.子元素选择器(如：div>p ,带大于号>)6.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)看完了基本的css选择器类型后，我们接着来看一下css优先级的概念。当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，用到谁的值谁的优先级就高。我们来看一下css选择器优先级的算法：每个规则对应一个初始"四位数"：0、0、0、0若是 行内选择符，则加1、0、0、0若是 ID选择符，则加0、1、0、0若是 类选择符/伪类选择符，则分别加0、0、1、0若是 元素选择符，则分别加0、0、0、1算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。看完了上述内容，那我们就来看看css选择器优先级的具体排序。css选择器优先级最高到最低顺序为：1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.子选择器(ul <li)5.后代选择器(li a)6.伪类选择(a:hover,li:nth-child)最后，需要注意的是：!important的优先级是最高的，但出现冲突时则需比较”四位数“优先级相同时，则采用就近原则，选择最后出现的样式继承得来的属性，其优先级最低。

这个是我写的代码：

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

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

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=GB2312" />

<meta name="robots" content="all" />

<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title>

<style type="text/css">

*{margin:0padding:0}

body {

background: #fff

font-family: "Lucida Grande", Helvetica, Arial, sans-serif

font-size: 12px

}

/* 定义样式的宽度和其他样式 */

.menu {font-size:12pxpadding-bottom:5pxwidth:750pxmargin:0 auto}

/* 清楚默认的padding和margin以及list的样式 */

.menu ul {padding:0margin:0list-style-type:noneheight:3embackground:transparent}

.menu ul ul{width:7em}

/* 定义float属性使得你可以定义下一级菜单的位置 */

.menu ul li {float:leftheight:3emline-height:3emdisplay:block}

/* 二级菜单样式 */

.menu ul ul li {display:blockwidth:7emheight:autoline-height:1em}

/* 一级菜单的默认样式 */

.menu a, .menu a:visited {display:blockfloat:leftheight:100%width:7emfont-size:1emtext-

decoration:nonecolor:#fffbackground:#949e7cpadding:0 1emborder-left:1px solid #eeeborder-right:1px solid #000}

/* hack IE5.x 定义以及菜单的宽度，这样可以使得获取或者设置当前宽度 */

* html .menu a, * html .menu a:visited { width:7emtext-decoration:none}

/* 下一级的链接默认外观样式 */

.menu ul ul a, .menu ul ul a:visited

{display:blockbackground:#5b8686

color:#fffwidth:7emheight:100%line-height:1empadding:0.5em 1emborder-bottom:1px solid #7aa}

/*定义下级菜单的宽度*/

* html .menu ul ul a, * html .menu ul ul a:visited {width:7em}

/* 定义IE6下table而做的样式 */

.menu table {border-collapse:collapsepadding:0margin:-1pxwidth:0height:0font-size:1emz-index:1}

/* 二级菜单的背景 */

/* 一级链接样式 */

* html .menu a:hover {color:#0066FFposition:relativez-index:100}

/**/

.menu li:hover {position:relative}

/**/

.menu :hover a {color:#ff0background:#d4d8bd}

/* 二级链接样式 */

* html .menu ul ul a:hover{color:#FF0000background:#7aaposition:relativez-index:110}

/*定位二级菜单的位置，设为相关的就是在一级菜单的下方显示，如果是absolute的话大家可以试试*/

.menu ul ul li:hover {position:relative}

.menu ul ul :hover a {color:#fffbackground:#7aa}

.menu ul ul {visibility:hiddenposition:absoluteheight:0top:3emleft:0width:8em}

/* 使得移动到一级定义是否显示下一级菜单，如果把 visibility:visible改成visibility:hidden则就隐藏了二级以上的菜单*/

.menu ul :hover ul{visibility:visibleheight:autopadding:0 3em 3em 3emleft:-3em}

</style>

</head>

<body>

<div class="menu">

<ul>

<li><a href="#">酒店主页<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="酒店环境">酒店环境</a></li>

<li><a href="#" title="酒店历史">酒店历史</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">酒店预订<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="房间查询">房间查询</a></li>

<li><a href="#" title="新增客房信息">新增客房信息</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">业务管理<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="入 住">入 住</a></li>

<li><a href="#" title="退 房">退 房</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">酒店论坛<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="我的论坛">我的论坛</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">访客留言<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="我的留言">我的留言</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#">今日活动<!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#" title="colour wheel">用户积分</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

</div>

</body>

</html>

希望能帮到你。。

web标准联盟