css各类选择器用法

CSS 选择器是 CSS 中最重要的部分之一。它们是我们要学习和了解的基础。CSS 选择器允许我们根据选择器的类型选择元素。

元素选择器

p {
  color: blue;
}

使用元素选择器，可以选择所有指定的元素。例如，这里的上面的代码会选择所有的<p>元素并将它们的文字颜色设为蓝色。

ID 和类选择器

#example {
  background-color: yellow;
}

.Box {
  border: 1px solid black;
}

选择ID和类是在 CSS 选择器中使用的一种常见方法。选择ID时，必须在选择器前面使用井号（#）。选择类时，必须在选择器前面使用点号（.）。

后代选择器

div p {
  font-size: 18px;
}

后代选择器查找元素的后代。在这个例子中，我们选择所有在<div>元素内的<p>元素，并设置字体大小为18像素。

子元素选择器

div > p {
  font-weight: bold;
}

子元素选择器只查找直接子元素。在上面的例子中，我们只选择<div>元素的直接子级——<p>元素。

通用选择器

* {
  margin: 0;
  padding: 0;
}

通用选择器可以匹配所有元素，同时我们可以使用它来清除默认的 margin 和 padding。

属性选择器

a[target="_blank"] {
  color: red;
}

属性选择器根据元素的属性值选择元素。在上面的例子中，我们选择了所有 target 属性值为 "_blank" 的 <a> 元素，并将其颜色设置为红色。

以上是 CSS 选择器的一些常见表现形式，选择器的灵活运用可让 Web 开发者在 CSS 中发挥出更大的创意和自由度。