css选择器的优先级
2018-11-25 本文已影响0人
Boy的复数形式
一、css选择器的优先级和权重知识
1.1各类选择器的介绍
(1)标签选择器和通配符选择器（用*表示）
标签有h1~h6 div a p img span 等，例如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
* {
font-family："微软雅黑"
}
span{
font-size: 150px;
}
</style>
</head>
<body>
<span class="g">G</span>
</body>
</html>
（2）行内选择器
<p style="color: red;">行内选择器</p>
（3）类选择器（.定义，class调用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.g{
color: skyblue;
}
</style>
</head>
<body>
<span class="g">G</span>
</body>
</html>
(4)ID选择器（#定义，id调用）
这类选择器用的少
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
#g{
font-size: 150px;
}
</style>
</head>
<body>
<span id="g">G</span>
</body>
</html>
(5)后代选择器(用空格隔开)、子代选择器（用大于号表示）、并集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li a{ /*后代选择器,所有后代 用空格表示*/
color: #FF0000;
}
ol li>a{ /*子代选择器,表示最邻近的的子代,亲儿子,用大于号表示*/
color: #0f0;
}
p,div,span{ /*并集选择器，用逗号隔开*/
color: #00f;
}
</style>
</head>
<body>
<ul>
<li>
<a href="">一级此单</a>
<div>
<a href="">二级菜单</a>
<a href="">二级菜单</a>
<a href="">二级菜单</a>
</div>
</li>
</ul>
<br />
<ol>
<li>
<a href="">一级此单</a>
<div>
<a href="">二级菜单</a>
<a href="">二级菜单</a>
<a href="">二级菜单</a>
</div>
</li>
</ol>
</body>
</html>
(6)链接伪类选择器（用于链接标签）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color:red;
font-size:100px;
text-decoration: none;
}
a:visited {
color: pink;
}
a:hover {
color: #00f;
}
a:active {
color: green;
}
/*实际开发只用写两种*/
h1 a{
color:black;
text-decoration: none;
}
h1 a:hover{
color:orange;
}
</style>
</head>
<body>
<a href="http://baidu.com">百度</a>
<h1><a>实际开发</a></h1>
</body>
</html>
（7）！important选择器（拥有最高权重）
h1 a:hover{
color:orange!important;
}
1.2选择器的权重和优先级排序(注意：下表说的都是单个的选择器权重，选择器的权重是可以叠加的)
| 选择器 | 权重 |
|---|---|
| 通配符选择器（*） | 0000 |
| 标签选择器(p、div等) | 0001 |
| 类选择器（.）和伪类（:） | 0010 |
| id选择器（#） | 0100 |
| 行内选择器（style="color: red;"） | 1000 |
| !important | ∞（无穷大） |
1、权重相同就近原则，对有冲突的样式进行覆盖，无冲突的样式显示
2、权重会叠加
1.3选择器的权重的叠加
| 叠加的选择器 | 权重 |
|---|---|
| (1)div ul li | 0003 |
| (2)a:hover | 0011 |
| (3).class div | 0101 |
| (3)>(2)>(1) |
注：1.权重的相加不进位
2.继承问题，无论父代权重多大，只要后代自己有和父代冲突的样式，则直接选择自己所有的样式
权重和优先级问题大概这么多，这主要是写给自己看的，所以如有不对的地方，希望各位大佬可以指出。
