CSS | 选择器完整参考

介绍

CSS选择器是一种用于选择HTML元素样式的方法，可以根据不同的属性和关系来选择不同的元素。在编写CSS样式表时，熟悉和使用各种选择器可以根据需要定位和修改目标元素，从而实现独特的样式效果。

本文将介绍CSS中常用的选择器，包括基本选择器、组合选择器、属性选择器、伪类选择器和伪元素选择器等。

基本选择器

基本选择器是CSS中最常用的选择器，可以选择HTML标签、id、class、通配符和属性等元素。

标签选择器

标签选择器是通过HTML标签名称来选择对应的元素，语法格式为：

标签名 {
    属性: 值;
}

例如：

p {
    color: #333;
}

这个样式会将整个文档中的所有P标签文字设置为黑色。

id选择器

id选择器可以通过元素的id属性来选择对应的元素，语法格式为：

#id名称 {
    属性: 值;
}

例如：

#header {
    background-color: #eee;
}

这个样式会将id为"header"的元素的背景色设置为浅灰色。

class选择器

class选择器可以通过元素的class属性来选择对应的元素，语法格式为：

.类名称 {
    属性: 值;
}

例如：

.active {
    font-weight: bold;
}

这个样式会将所有带有"active"类的元素文字加粗显示。

通配符选择器

通配符选择器可以选择所有元素，语法格式为：

* {
    属性: 值;
}

例如：

* {
    margin: 0;
    padding: 0;
}

这个样式会将所有元素的外边距和内边距都设置为0。

属性选择器

属性选择器可以根据元素属性的值来选择对应的元素，有如下三种形式：

[属性]选择器

这种形式选择所有包含该属性的元素，语法格式为：

[属性] {
    属性: 值;
}

例如：

[a] {
    color: blue;
}

这个样式会将所有包含"a"属性的元素文字设置为蓝色。

[属性 = 值]选择器

这种形式选择属性值等于指定值的元素，语法格式为：

[属性 = '值'] {
    属性: 值;
}

例如：

[disabled = 'disabled'] {
    opacity: 0.5;
}

这个样式会将所有disabled属性值为"disabled"的元素透明度设置为0.5。

[属性 ~= 值]选择器

这种形式选择属性值包含指定值的元素，语法格式为：

[属性 ~= '值'] {
    属性: 值;
}

例如：

[rel ~= 'external'] {
    color: green;
}

这个样式会将所有含有rel属性值为包含"external"的元素文字颜色设置为绿色。

组合选择器

组合选择器将各种基本选择器组合起来，实现更精细的元素选择。

后代选择器

后代选择器可以选择某个元素内部的子元素，语法格式为：

祖先元素 子元素 {
    属性: 值;
}

例如：

ul li {
    list-style: none;
}

这个样式会将所有ul元素内部的li子元素列表符号去掉。

子代选择器

子代选择器只会选择一个元素的直接子元素，而不会选择孙子或更深层级的元素，语法格式为：

父元素 > 子元素 {
    属性: 值;
}

例如：

.container > p {
    font-size: 1.2em;
}

这个样式会将class为"container"的元素下的直接子元素p的字号设置为1.2em。

相邻兄弟选择器

相邻兄弟选择器可以选择紧接着指定元素后面的兄弟元素，语法格式为：

元素1 + 元素2 {
    属性: 值;
}

例如：

h2 + p {
    margin-top: 0;
}

这个样式会将紧接着h2元素的p元素的顶部外边距去掉。

通用兄弟选择器

通用兄弟选择器可以选择指定元素之后的所有兄弟元素，语法格式为：

元素1 ~ 元素2 {
    属性: 值;
}

例如：

h2 ~ p {
    margin-left: 1.2em;
}

这个样式会将h2元素之后所有的p元素的左边外边距设置为1.2em。

伪类选择器

伪类选择器可以根据元素的状态或位置来选择对应的元素，例如鼠标移入或移出、访问或未访问的链接等。

鼠标状态伪类选择器

这种类型的伪类选择器可以用于根据鼠标状态选择对应的元素，例如:hover、:active、:link和:visited。

a:hover {
    color: red;
}

这个样式会将鼠标移入链接时的文字颜色设置为红色。

结构性伪类选择器

这种类型的伪类选择器可以用于根据元素的位置或结构选择对应的元素，例如:first-child、:last-child、:nth-child等。

ul li:first-child {
    font-weight: bold;
}

这个样式会将每个ul元素下第一个li元素的文字加粗。

功能性伪类选择器

这种类型的伪类选择器可以用于根据元素的特性选择对应的元素，例如:target可以选择活动链接、:not可以选择不含某属性的元素等。

:not(:first-child) {
    margin-left: 10px;
}

这个样式会将每个非第一个子元素的左边外边距设置为10px。

伪元素选择器

伪元素选择器可以选中某个HTML元素中的虚拟元素，如：:before、:after等。

p:before {
    content: "Hello";
}

这个样式会在每个P元素的前面添加一个内容为"Hello"的虚拟元素。

总结

本文介绍了CSS选择器中的基本选择器、组合选择器、属性选择器、伪类选择器和伪元素选择器，通过学习和使用这些选择器，可以更加精准地控制HTML元素的样式，达到想要的效果。