CSS选择器详解：元素选择器、类选择器、ID选择器

翻滚的胖子
2023-05-30 01:02:38
前端技术
HTML CSS JavaScript

CSS选择器详解：元素选择器、类选择器、ID选择器

在前端开发中，CSS选择器是非常重要的一部分，它可以用来选择HTML文档中的元素，并对其进行样式定义。CSS选择器有很多种，本文将详细讲解其中的三种常用选择器：元素选择器、类选择器、ID选择器。

元素选择器

元素选择器是最基础的选择器，它可以选中HTML文档中的所有指定类型的元素。使用方法非常简单，只需要在CSS样式表中写上元素名称即可，例如：

p {
  color: red;
}

这段代码表示将所有<p>标签的文字颜色设置为红色。

需要注意的是，元素选择器会选中HTML文档中所有指定类型的元素，如果想要选择某个具体的元素，可以使用类选择器或ID选择器。

类选择器

类选择器可以用来选中HTML文档中带有特定类名的元素。使用方法是在CSS样式表中写上类名前缀“.”，例如：

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

这段代码表示将所有带有“my-class”类名的元素的字体大小设置为16px。

需要注意的是，一个元素可以同时有多个类名，类名之间用空格分隔。例如：

<div class="my-class other-class"></div>

这个<div>标签既有“my-class”类名，又有“other-class”类名。

ID选择器

ID选择器可以用来选中HTML文档中带有特定ID的元素。使用方法是在CSS样式表中写上ID前缀“#”，例如：

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

这段代码表示将ID为“my-id”的元素的背景颜色设置为黄色。

需要注意的是，一个HTML文档中每个ID应该是唯一的，不应该有多个元素共用一个ID。

代码案例

以下是一个简单的代码案例，演示了如何使用元素选择器、类选择器、ID选择器对不同的HTML元素进行样式定义。

<html>
<head>
  <style>
    /* 元素选择器 */
    p {
      color: red;
    }
    /* 类选择器 */
    .my-class {
      font-size: 16px;
    }
    /* ID选择器 */
    #my-id {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>这是一个<p>标签。</p>
  <div class="my-class">这是一个<div>标签。</div>
  <div id="my-id" class="my-class">这是另一个<div>标签。</div>
</body>
</html>

运行效果如下图所示：