选择器

苓渊大约 4 分钟

标签选择器

通过标签名选择标签。

/* 选中所有的 p 标签 */
p {
    /* 设置字体大小 */
    font-size: 30px;
}

通过类名选择标签，可以同时选中多个标签。

所有标签都有 class 属性，其值为标签的类名。类名由字母、数字、下划线和中划线组成，不能以数字和中划线开头。一个标签可以同时有多个类名，类名之间用空格隔开。

/* 选中 class = blue 的标签 */
.one {
    /* 颜色设置为蓝色 */
    color:blue;
}

通过 id 选择标签，只能选择一个标签。

所有标签都有 id 属性，id 在一个 HTML 页面中唯一不可重复。

/* 选中 id = skyblue 的标签  */
#skyblue {
    color: skyblue;
}

选择页面中所有的标签。

/* 设置所有标签颜色为蓝色 */
* {
    color: blue;
}

根据 HTML 标签的嵌套关系，选择一个父元素的后代中满足条件的元素。后代包括所有后代（子代，孙子代、重孙子代）。

后代选择器可以是任何选择器（标签选择器、类选择器、id选择器）。

/* 选中 div 标签下的所有 p 标签 */
div p {
    
}

选择一个父元素的子代中满足条件的元素。

/* 选中仅在一个 div 标签下的所有 p 标签 */
div>p {
    
}

同时选择多组标签，每组选择器之间用逗号分隔，可以是基础选择器或复合选择器。

/* 选中类名为 center 和 goods 类的标签和所有的 p 标签 */
.center ,
.goods , 
p {
    
}

选择同时满足所有选择器的标签，每组选择器紧挨在一起。

/*选择类名为 goods 的 p 标签 */
p.goods {
    
}

伪类选择器选中的是元素的某种状态（比如 hover 鼠标悬停），任何标签都可以添加。

/* 鼠标悬停在 a 标签上时要展示的样式 */
a:hover {
    color: red;
    background-color: green;
}

根据元素在 HTML 中的结构关系查找元素。

查找父级选择器中的某个子元素：

n 的取值方式

n 可以为数值（0、1、2、3、4、...）

也可以组成常见公式：

li:first-child {}
li:last-child {}
li:nth-child(4n) {}
li:nth-last-child(-n+3) {}

伪元素是指由 CSS 来模拟出的 HTML 标签的效果，使用时必须设置 content 属性才能生效，默认是一个行内元素。

span::before {
  content: 'span:';
  color: pink;
}
span::after {
  content: 'span标签结束';
}

选择器具有不同的优先级，优先级高的选择器样式将覆盖优先级低选择器样式，选择器越精准优先级越高。

优先级：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important.

!important 强制提升当前样式优先级至最高，但不提升继承者的优先级，使用时写在属性值的最后。

div {
  color: orange !important;
}

复合选择器需要通过权重叠加计算方法，判断最终哪个复合选择器优先级最高。

比较规则：