CSS简单选择器
id
示例:
<div id="username"></div>
# username {
background: red;
} class
示例:
<div class="coupon selectedCoupon"></div>
.coupon {
width:100%;
}
.selectedCoupon {
background: red;
} 标签选择器
示例:
div {
width:100%;
} 通配符
* {
background: #FFF;
} 特定选择器
[id] {
background: white;
}
[id="username"] {
background: red;
}
[class] {
width: 100%;
} 复杂选择器
父子选择器/派生选择器
.wrapper #box span {
background: red;
} 直接子元素选择器
wrapper class下的直接一级子元素, 不包含更下级的子元素
.wrapper > child {
background: red;
} 并列选择器
多个条件并列的选择器
针对div且是class为box的元素
div.box {
background: red;
} 分组/群组选择器
多个选择器使用同一个css样式
.demo, .demo2 {
background: red;
} 伪类选择器
.myDiv:hover {
background: red;
} 伪元素选择器
伪元素默认是行级元素
span::before {
background: red;
} 权重
一个样式是否作用于元素依赖于这个样式的权重和如下所示样式来源的顺序，下面这个列表中越靠前的权重越小:
- 用户代理声明（译注：如浏览器默认样式）
- 用户声明（译注：如用户浏览器选项设置或通过开发人员调试工具修改）
- 开发者声明（译注：如页面中引用的CSS）
- 带有!important的开发者声明
- 带有!important的用户声明
警告⚠️: 永不使用important, 否则最终会难以维护
权重比较
| 元素 | 权重 |
|---|---|
| !important | infinity |
| 内联样式=行间样式(style=””) | 1000 |
| id(#myid) | 100 |
| class/属性/伪类(.class/[type]/:hover, :link, :target) | 10 |
| 标签/伪元素(div/::after, ::before, ::fist-inline, ::selection) | 1 |
| 通配符(*) | 0 |
寻找同一行的最高级的权重，并求和，进行对比，若一致则对比低一级的权重，递归往下直到没有选择器
基础属性
根据CSS参考手册查询