CYQ notesCSS 选择器-权重
通配符选择器
css
* {
color: red;
}
/* 选择所有元素 */
类选择器
css
.name {
color: red;
}
/* 选择所有class="name"的元素 */
id 选择器
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
⚠️ id 名称不能以数字开头。
css
#name {
color: red;
}
/* 选择所有id="name"的元素 */
标签选择器
css
p {
color: red;
}
/* 选择所有<p>元素 */
伪类选择器、伪元素
伪类用于定义元素的特殊状态
css
a:hover {
color: red;
}
伪元素用于设置元素指定部分的样式
css
p::first-line {
color: red;
}
/* 文本的首行添加特殊样式 */
属性选择器
css
a[href] {
color: red;
}
/* 对有 href 属性的（a 元素） */
交集选择器
css
p.choose {
color: red;
}
/* p标签，并且class 是 choose 的元素 */
并集选择器
css
h1,
h2,
h3,
h4,
h5 {
font-size: 12px;
}
/* 选择写上的所有元素 */
后代选择器
后代选择器匹配属于指定元素后代的所有元素。
css
p span {
color: green;
}
/* 后代选择器产生的影响不仅限于元素的直接后代，而且会影响到它的各级后代。 */
子选择器匹配属于指定元素子元素的所有元素。
css
p > span {
color: green;
}
/* 只对直接后代有影响的选择器，对“孙子”以及多个层的后代不产生作用 */
兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。 兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
css
h1 + p {
margin-top: 50px;
}
/* 增加紧接在 h1 元素后出现的p的上边距 */
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
css
div ~ p {
background-color: yellow;
}
/* 选择属于 <div> 元素的同级元素的所有 <p> 元素 */
权重
| 选择器 | 权重 |
|---|---|
| ！important | infinity |
| 内联样式 | 1000 |
| id 选择器 | 100 |
| class 选择器、属性选择器、伪类选择器 | 10 |
| 标签选择器、伪元素选择器 | 1 |
| 通配符选择器 | 0 |
INFO
正无穷+1>正无穷。
如果权重值一样，后面的会覆盖前面的 。