css选择器都有哪些表现形式

美工学习

本教程操作系统：windows10系统、

CSS选择器有很多种形式，每种形式都有不同的语法和应用场景。以下是一些常见的CSS选择器形式：

1、元素选择器：元素选择器是最基本的选择器，它根据html元素的类型来选择元素。例如，p选择器将选择所有的段落元素。

2、类选择器：类选择器是通过HTML元素的类属性来选择元素的。类选择器使用.符号来表示，后面跟着类名。例如，.my-class选择器将选择所有类名为my-class的元素。

3、ID选择器：ID选择器是通过HTML元素的ID属性来选择元素的。ID选择器使用#符号来表示，后面跟着ID名。ID在HTML文档中是唯一的，所以你可以使用它来为特定的元素设置样式。例如，#my-id选择器将选择ID为my-id的元素。

4、属性选择器：属性选择器是用于选择具有特定属性的元素。以下是一些常用的属性选择器的例子：

• [attribute]：选择具有指定属性的所有元素。
• [attribute=value]：选择具有指定属性和值的所有元素。
• [attribute~=value]：选择具有指定属性值（用空格分隔）的所有元素。例如，a[href]选择器将选择所有具有href属性的链接元素，a[href="example.com"]选择器将选择所有具有href属性值为“example.com”的链接元素。
  

5、伪类和伪元素选择器：伪类和伪元素选择器用于选择处于特定状态的元素或元素的特定部分。以下是一些常用的伪类和伪元素选择器的例子：

• :hover：选择鼠标悬停时的元素。
• :active：选择被用户激活的元素。
• :visited：选择已被用户访问过的链接元素。
• ::before和::after：插入在元素内容前或后的内容。例如，:hover a选择器将选择鼠标悬停时的所有链接元素，a::before { content: "text"; }将在所有链接元素的内容前插入一些文本。
  

6、组合选择器：组合选择器允许你根据其他元素的关系来选择元素。以下是一些常用的组合选择器的例子：

• 子代选择器（Child combinators）：通过空格分隔的两个元素，表示第一个元素是第二个元素的直接子元素。例如，p a选择器将选择所有直接包含在段落中的链接元素。
• 后代选择器（Descendant combinators）：通过空格分隔的两个元素，表示第一个元素可以是第二个元素的任何后代元素。例如，p a选择器将选择所有包含在段落中的链接元素，无论它们有多深的后代关系。
• 相邻兄弟选择器（Adjacent sibling combinators）：通过+符号分隔的两个元素，表示第一个元素是第二个元素的下一个兄弟元素，且它们有相同的父元素。例如，p + a选择器将选择所有紧接在段落后的链接元素。
• 一般兄弟选择器（General sibling combinators）：通过空格分隔的两个元素，表示第一个元素可以是第二个元素的任何兄弟元素。例如，p ~ a选择器将选择所有在段落之后的链接元素，无论它们之前有多少其他兄弟元素。
  

7、属性选择器和伪类/伪元素结合使用：你还可以将属性选择器和伪类/伪元素结合使用来创建更复杂的规则。例如，你可以使用:hover a[href]来选择鼠标悬停时具有href属性的链接元素。

以上是CSS的一些常见选择器形式，但实际上CSS还提供了更多的高级和复杂的选择器语法，可以根据具体需求进行灵活应用。