CSS选择器
| CSS选择器 | 表示 |
|---|---|
| ID选择器 | #id |
| class选择器 | .class |
| 标签选择器 | p、a等 |
| 通配符选择器 | *（表示选择所有的标签元素） |
| 属性选择器 | [type='text'] |
| 伪类选择器 | :hover |
| 伪元素选择器 | ::first-line |
| 其他选择器 | 子选择器、相邻选择器 |
CSS选择器权重
| 类型 | 权重 |
|---|---|
| ! important | 无穷 |
| 内联样式（如） | 1000 |
| ID选择器 | 100 |
| class/属性/伪类选择器 | 10 |
| 标签/伪元素选择器 | 1 |
| 通配符 | 0 |
每个元素都有权重值，那么先应用哪个样式，就是哪个元素的权重大应用哪个元素的样式。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS选择器权重</title>
<style type="text/css">
/* 会发现显示的是后面的blue的背景颜色，而不是red颜色，它们的权重都是10 */
/* 交换.a1和[href]的位置就会显示红色了 */
/* 那么要显示红色怎么办呢？提高权重即可，把“[href]”修改为“a[href]”权重此时为11，所以显示红色 */
/* 把“[href]”修改为“#d1 [href]”权重此时为110，所以也显示红色 */
[href] {
background: red;
font-size: 30px;
}
/* a[href] {
background: red;
font-size: 30px;
} */
/* #d1 [href] {
background: red;
font-size: 30px;
} */
.a1 {
background: blue;
font-size: 30px;
}
</style>
</head>
<body>
<div id="d1">
<a href="#" class="a1">超链接</a>
</div>
</body>
</html>
浏览器显示如下：
