举例学习CSS选择器

吴欣
95 阅读3分钟

CSS（层叠样式表的缩写）提供了一些针对HTML元素的模式，并在这些元素上实现我们选择的一些样式，这些模式被称为CSS选择器。这些选择器根据id、class、type等来寻找HTML元素。

你是否想知道CSS选择器如何工作？不用担心!本文将通过实例来展示对CSS选择器的详细理解。让我们先从语法开始。

语法

编写CSS选择器的语法见下面的片段。

这里的 "p "是选择器，它将把该段的颜色转换成绿色。

CSS选择器的类型

CSS提供了各种类型的选择器，每种类型都拥有不同的功能。本文将介绍以下几种类型:

元素选择器

在CSS中，元素选择器是用来根据HTML元素的名称来定位的。

例如，下面的代码将使用元素选择器为所有的段落实现黑色的背景颜色和绿色的文本颜色。

<html>
<head>
<style>
p {
  background-color:black;
  color: green;
  text-align: center;
}
</style>
</head>
<body>  
  <h3>Selectors</h3>
  <p> Frontend Development </p>
  <p> Backend Development</p>
</body>
</html>

下面给出的输出将演示CSS元素选择器的工作。

类选择器

CSS类选择器用于用特定的类名来定位HTML元素。类选择器的语法包括一个句号（......），然后是类的名称。

.className{ CSS-property: value}

在上面的语法中，"className "是一个类选择器。

让我们考虑一个例子，它将使用类选择器针对标题和段落元素，如下面的代码所示。

<html>
<head>
<style>
.style {
  background-color:black;
  color: green;
  text-align: center;
}
</style>
</head>
<body>  
  <h3 class="style">Selectors</h3>
  <p class="style"> Frontend Development </p>
  <p class="style"> Backend Development</p>
</body>
</html>

在这个例子中，".style "是类选择器，它指定了一些属性。在正文部分的h3和两个p元素都有类名 "style"

下面的代码片断将显示上述代码片断的输出。

id选择器

在CSS中，id选择器是基于id属性来定位HTML元素的。在id选择器中使用了元素id后面的哈希符号（#）。

让我们看一个例子，它将在id="style "的HTML元素上实现指定的样式，如下所示:

<html>
<head>
<style>
#style {
  background-color: black;
  color: green;
  text-align: center;
}
</style>
</head>
<body>  
  <h3>Selectors</h3>
  <p id="style"> Frontend Development </p>
  <p> Backend Development </p>
</body>
</html>

在p元素上实现的id选择器将提供以下输出。

现在，你一定在想id选择器和class选择器之间有什么区别？

id是一个唯一的标识符，这意味着一旦我们对一个元素使用了id，同一个id就不能在同一个文档中的其他地方使用。如果我们在一个文档中使用了两次相同的id，那么CSS将把样式应用于最新的那个。虽然类是很好的分类器，但它们在本质上不是唯一的。

分组选择器

分组选择器针对具有相同样式的多个元素。分组选择器在多个选择器之间利用了'，'。

让我们考虑一个例子，它将对多个元素实施相同的样式，如下面的片段所示。

<html>
<head>
<style>
 footer, h3{
  background-color:black;
  color: green;
}
</style>
</head>
<body>  
  <h3>Selectors</h3>
  <p> Frontend Development </p>
  <p> Backend Development</p>
  <footer>This is a footer</footer>
</body>
</html>

下面的输出将验证分组选择器对h3和footer元素应用了相同的样式。

通用选择器

通用选择器对文档中的所有元素进行样式设计。一个"*"符号被用来实现通用选择器。例如，下面的代码将在所有的HTML元素上应用给定的样式。

<html>
<head>
<style>
*{
  background-color:black;
  color: green;
}
</style>
</head>
<body>  
  <h3>Selectors</h3>
  <p> Frontend Development </p>
  <p> Backend Development</p>
  <footer>This is a footer</footer>
</body>
</html>

上述代码将在整个文件上实现，结果是，我们将得到以下输出。

结论

CSS选择器可以找到/瞄准HTML元素，并对它们实现一些样式属性。有许多类型的CSS选择器，本篇文章介绍了其中的几种，如元素选择器和分别基于元素名称和类别名称的类别选择器。每种类型都有不同的功能，比如id选择器根据元素的id实现一些动作，分组选择器针对多个元素，通用选择器影响整个文档，等等。

avatar
文章
阅读
粉丝