开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

CSS 选择器-权重

通配符选择器

* {
    color: red;
}
/* 选择所有元素 */

.name {
    color: red;
}
/* 选择所有class="name"的元素 */

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

id 名称不能以数字开头。

#name {
    color: red;
}
/* 选择所有id="name"的元素 */

p {
    color: red;
}
/*  选择所有<p>元素 */

伪类用于定义元素的特殊状态

a:hover {
    color: red;
}

伪元素用于设置元素指定部分的样式

p::first-line {
    color: red;
}
/* 文本的首行添加特殊样式 */

a[href] {
    color: red;
}
/* 对有 href 属性的（a 元素） */

p.choose {   
    color: red;
}
/* p标签，并且class 是 choose 的元素 */

h1,
h2,
h3,
h4,
h5 {
 font-size: 12px;
}
/* 选择写上的所有元素 */

后代选择器匹配属于指定元素后代的所有元素。

p span {
    color: green;
}
/* 后代选择器产生的影响不仅限于元素的直接后代，而且会影响到它的各级后代。 */

子选择器匹配属于指定元素子元素的所有元素。

p > span {
    color: green;
}
/* 只对直接后代有影响的选择器，对“孙子”以及多个层的后代不产生作用 */

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

h1 + p {
    margin-top: 50px;
}
/* 增加紧接在 h1 元素后出现的p的上边距 */

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

div ~ p {
    background-color: yellow;

}
/* 选择属于 <div> 元素的同级元素的所有 <p> 元素 */

正无穷+1>正无穷。

如果权重值一样，后面的会覆盖前面的。