简介CSS中的各种选择符

1. ID选择器

在CSS中，可以使用ID选择器来选择具有指定ID的元素。ID选择器在HTML中使用id属性进行标记，而在CSS中使用#符号后跟ID的名称。

例如，如果在HTML中有一个元素的id属性设置为my-element，那么可以使用以下的CSS代码来选择该元素：

#my-element {

   color: blue;
}

上述代码表示将具有my-element ID的元素的文本颜色设置为蓝色。

1.1 ID选择器的使用注意事项

值得注意的是，ID选择器是唯一的，意味着一个HTML文档中只能有一个具有相同ID的元素。这是因为ID应被用于唯一标识一个元素，而不是用作样式选择器。

因此，应注意确保给每个元素分配一个唯一的ID，并且在CSS中使用ID选择器时要确保选择的是想要样式化的唯一元素。

2. 类选择器

类选择器用于选择具有相同类别名称的元素，它们以.符号开头。

在HTML中，可以使用class属性为元素指定一个或多个类别名称。例如：

<p class="highlight">This is a highlighted paragraph.</p>

然后，可以使用以下CSS代码来选择具有highlight类别的元素并设置样式：

.highlight {

   background-color: yellow;
}

上述代码表示将所有具有highlight类别的元素的背景颜色设置为黄色。

2.1 多个类选择器的使用

一个元素可以同时具有多个类别名称，多个类选择器可以同时应用于这个元素。只需在CSS中用.符号连接类别名称即可。

例如，下面的HTML代码指定了一个具有两个类别名称的段落元素：

<p class="highlight underline">This is a highlighted and underlined paragraph.</p>

然后，可以使用以下CSS代码来同时选择具有highlight和underline类别的元素并设置样式：

.highlight.underline {

   background-color: yellow;
   text-decoration: underline;
}

上述代码表示将具有highlight和underline类别的元素的背景颜色设置为黄色，并且给它们加下划线。

3. 元素选择器

元素选择器是最基本的选择器，用于选择指定的HTML元素。

例如，下面的CSS代码将选择所有的段落元素并设置样式：

p {

   color: red;
}

上述代码表示将所有的段落元素的文本颜色设置为红色。