CSS3中31种选择器使用方法教程

CSS选择器是CSS的重要组成部分，它们用于选择要应用样式的HTML元素。以下是一个详细的攻略，介绍了CSS3中31种选择器的使用方法，包括两个示例说明：

1. 基本选择器

基本选择器是最常用的选择器，它们根据元素的标签名、类名、ID等属性来选择元素。以下是一些基本选择器的示例：

• 标签选择器：选择所有指定标签的元素。

p {
  color: red;
}

上述代码将选择所有<p>元素，并将它们的颜色设置为红色。

• 类选择器：选择所有指定类名的元素。

.my-class {
  font-size: 16px;
}

上述代码将选择所有类名为my-class的元素，并将它们的字体大小设置为16像素。

• ID选择器：选择所有指定ID的元素。

#my-id {
  background-color: blue;
}

上述代码将选择所有ID为my-id的元素，并将它们的背景颜色设置为蓝色。

2. 属性选择器

属性选择器根据元素的属性值来选择元素。以下是一些属性选择器的示例：

• [attribute]选择器：选择所有具有指定属性的元素。

[title] {
  color: green;
}

上述代码将选择所有具有title属性的元素，并将它们的颜色设置为绿色。

• [attribute=value]选择器：选择所有具有指定属性和属性值的元素。

[type="text"] {
  border: 1px solid black;
}

上述代码将选择所有type属性值为text的元素，并将它们的边框设置为1像素宽的黑色实线边框。

• [attribute^=value]选择器：选择所有具有指定属性和以指定值开头的属性值的元素。

[href^="https"] {
  color: blue;
}

上述代码将选择所有href属性值以https开头的元素，并将它们的颜色设置为蓝色。

3. 伪类选择器

伪类选择器用于选择元素的特定状态，例如鼠标悬停、访问过的链接等。以下是一些伪类选择器的示例：

• :hover选择器：选择鼠标悬停在元素上的元素。

a:hover {
  text-decoration: underline;
}

上述代码将选择所有鼠标悬停在链接上的元素，并将它们的文本下划线设置为实线。

• :visited选择器：选择所有已访问过的链接。

a:visited {
  color: purple;
}

上述代码将选择所有已访问过的链接，并将它们的颜色设置为紫色。

• :nth-child(n)选择器：选择父元素的第n个子元素。

li:nth-child(odd) {
  background-color: lightgray;
}

上述代码将选择所有父元素的奇数个子元素，并将它们的背景颜色设置为浅灰色。

总结

CSS选择器是CSS的重要组成部分，它们用于选择要应用样式的HTML元素。在CSS3中，有31种不同的选择器，包括基本选择器、属性选择器和伪类选择器等。用户可以根据自己的需求选择适合自己的选择器，例如使用:hover选择器选择鼠标悬停在元素上的元素。