前言

当我们构建网页时，CSS（层叠样式表）是一种至关重要的技术，它允许我们对HTML文档进行样式化和布局。CSS选择器是CSS中一个关键的概念，它允许我们选择并样式化特定的HTML元素。在本文中，我们将深入探讨CSS选择器的不同类型和用法。

选择器类型

元素选择器

元素选择器是最基本的选择器之一，它通过元素的名称选择HTML文档中的元素。例如，要选择所有的段落元素，可以使用如下的元素选择器：

p {
  /* CSS样式规则 */
}

类选择器

类选择器允许我们选择具有特定类名的元素。这使得我们可以对网页中的多个元素应用相同的样式。例如：

.class {
  /* CSS样式规则 */
}

ID选择器

ID选择器通过元素的唯一标识符（ID）来选择特定的元素。ID在整个HTML文档中应该是唯一的。示例：

#id {
  /* CSS样式规则 */
}

后代选择器

后代选择器允许我们选择嵌套在其他元素内的元素。例如，选择所有在div元素内的段落：

div p {
  /* CSS样式规则 */
}

子元素选择器

子元素选择器选择某个元素的直接子元素。示例：

ul > li {
  /* CSS样式规则 */
}

相邻兄弟选择器

相邻兄弟选择器选择同一父元素下紧接在另一个元素后的元素。例如：

h2 + p {
  /* CSS样式规则 */
}

属性选择器

属性选择器允许我们选择具有特定属性的元素。示例：

input[type="text"] {
  /* CSS样式规则 */
}

伪类

伪类是一种选择器，允许根据元素的状态或位置选择元素。例如，选择未访问过的链接：

a:link {
  /* CSS样式规则 */
}

伪元素允许我们选择元素的特定部分。例如，选择段落的第一个字母：

p::first-letter {
  /* CSS样式规则 */
}

优先级

在CSS中，当多个规则应用于同一元素时，浏览器需要确定哪些规则具有更高的优先级。这就引入了CSS选择器的权重，用于决定哪些规则更具优先级。权重是一个四位数，通常以以下形式表示：

    (a, b, c, d)

其中，a、b、c、d分别表示选择器的不同部分的权重，具体规则如下：

千位(a) : 行内样式（Inline styles）。 通过在HTML元素的style属性中定义的样式，拥有最高的优先级。
百位(b) : ID选择器。 通过使用ID选择器选中的元素，例如#myId。一个ID选择器的权重为100。
十位(c) : 类选择器、伪类选择器和属性选择器。 这包括类选择器（例如.myClass）、伪类选择器（例如:hover）和属性选择器（例如[type="text"]）。一个类选择器的权重为10，一个伪类选择器的权重为10，一个属性选择器的权重为10。
个位(d) : 元素选择器和伪元素选择器。 这包括元素选择器（例如p）和伪元素选择器（例如::before）。一个元素选择器的权重为1，一个伪元素选择器的权重为1。

如果有多个规则应用于同一个元素，浏览器将计算它们的权重并选择具有最高权重的规则应用于元素。如果权重相同，则后定义的规则将覆盖先定义的规则。需要注意的是，通配符选择器（*）和继承的样式没有权重，它们的权重始终为0。 因此，它们在与其他选择器冲突时，通常具有较低的优先级。

继承属性

在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

关于继承属性，可以分成：

字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体

文本系列属性

text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

元素可见性

visibility

表格布局属性

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

列表属性

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

引用

quotes：设置嵌套引用的引号类型

光标属性

cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的

无继承的属性

display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after

面试官：你了解css选择器吗

前言