您的位置：首页 > Web前端 > CSS

CSS选择器的权重与优先规则

2015-10-22 19:12 627 查看

CSS选择器的权重与优先规则

CSS中每一个定义的样式都有权重，权重越大优先级越大，就会覆盖低优先级的同样名称的样式。如果优先级一样，后定义的会覆盖之前定义的。

1.第一等是在标签里面定义的样式，如：

<input style='width:100px'>

2.第二等是ID选择器，如：

#myid {
width: 100px;
}

3.第三等是类选择器，如：

.myclass{
width: 100px;
}

4.第四等是标签选择器，如：

input{
width: 100px;
}

5.如果是组合型的选择器，权重就等于各个子选择器的权重的和

#myid .myclass input h1 {
width: 100px
}

例如这个样式的权重就是100+10+1+1=112

例子

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#myid h1 {
color: red;
}

#myid {
color: blue;
}

.myclass {
color: orange;
}

div {
color: #000000;
}

#myid .myclass input h1 {
width: 100px
}
</style>
</head>
<body>
<!--红色-->
<div id="myid" class="myclass"><h1>红色</h1></div>
<!--蓝色-->
<div id="myid" class="myclass">蓝色</div>
<!--橙色-->
<div class="myclass">橙色</div>
<!--黑色-->
<div>黑色</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航