CSS选择器

Pcjmy2021-07-15CSSCSS

CSS 选择器

CSS 选择器用于选择需要设置样式的元素，主要有以下几种类型：

标签选择器会将网页内所有该标签增加相同的样式，主要用于 HTML 中定义的标签，如 body、div、p 等标签。标签选择器的语法如下。

标签 {
    CSS样式
}

下面给出标签选择器的实例。

ID 选择器使用 HTML 元素的 ID 属性来选择特定元素。元素的 ID 是自定义的，并且也是唯一的。ID 选择器的语法如下。

#ID {
    CSS样式
}

下面给出 ID 选择器的实例。

类选择器选择具有特定 class 属性的 HTML 元素。同一个标签可以具有多个类选择器。类选择器的语法如下。

.类名 {
    CSS样式
}

下面给出类选择器的实例。在此实例中定义了有关形状的三个类 square、rectange 和 circle，以及有关颜色的三个类 red、blue、orange，每个 div 都具有两个类。

伪类选择器用于选择处于特定状态的元素。伪类名称是自定义的，以冒号开头。伪类需要与其他选择器结合使用。常见的伪类选择器如下。

下面给出伪类选择器的实例。当鼠标悬停在下面的方块时，方块会缓慢放大到 1.5 倍大小。当鼠标点击下面的输入框时，输入框长度变为原来的 2 倍，并且显示背景颜色。

通配符选择器用于选择指定类型的 HTML 元素。通配符选择器是功能最强大的选择器。

下面给出通配符选择器的实例。在此实例中定义了 5 个 div，使用通配符选择器定义了所有文字的样式，所有 id 为 app 的元素的样式以及所有含有 class 属性的元素的样式。

除了上面介绍的 5 种 CSS 选择器，还有复合选择器、伪元素选择器等选择器。在使用选择器时需要注意选择器的优先级，优先级关系有：ID 选择器>类与伪类选择器>标签选择器>通配符选择器。当一个 HTML 元素使用不同优先级的选择器，页面会显示高优先级选择器的样式。