总结30个CSS3选择器-猿码集

1. 通用选择器

通用选择器（*）可以匹配HTML文档中的任何元素。它是CSS3选择器中最简单的一种，常用于设置多个元素的共同样式。


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

通用选择器可以用来重置一些默认样式，比如将所有元素的外边距和内边距重置为零，并且使用box-sizing: border-box;使所有元素的宽度和高度包括边框和内边距。

元素选择器通过HTML文档中的标签名来选择元素。例如，要选择所有的元素，可以使用下面的CSS代码：


p {
  color: red;
}

这段代码将设置所有的元素的文本颜色为红色。

元素选择器可以用来为整个网页的特定元素设置样式，如设置所有的标题（<h1>至<h6>）字体大小为20像素，可以使用以下代码：


h1, h2, h3, h4, h5, h6 {
  font-size: 20px;
}

这段代码选择了所有的标题元素，然后将它们的字体大小设置为20像素。

类选择器用于选择具有相同类名的元素。要使用类选择器，需要在HTML元素的class属性中添加一个类名。


<p class="highlighted-text">这是一个带有.highlighted-text类的段落元素</p>
.highlighted-text {
  background-color: yellow;
}

上面的代码将选择所有具有.highlighted-text类的段落元素，并将它们的背景颜色设置为黄色。

使用类选择器可以方便地为特定类型的元素添加样式，无论它们位于HTML文档中的哪个位置。

ID选择器用于选择具有唯一ID的元素。要使用ID选择器，需要在HTML元素的id属性中指定一个ID。


<div id="container">
  这是一个具有id="container"的div元素。
</div>
#container {
  width: 500px;
  height: 300px;
}

上面的代码选择了具有id="container"的div元素，并将它的宽度设置为500像素，高度设置为300像素。

与类选择器不同，ID选择器只能选择具有唯一ID的元素，通常用于为页面上的一个特定元素添加样式。

属性选择器根据HTML元素的属性值选择元素。有多种不同的属性选择器可以使用。

基本属性选择器使用等号来选择具有指定属性值的元素。


a[href="https://www.example.com"] {
  color: blue;
}

上面的代码选择具有href属性值为"https://www.example.com"的连接，并将它们的文本颜色设置为蓝色。

使用基本属性选择器可以方便地选择具有特定属性值的元素，例如选择所有图片的alt属性值为"logo"的图片，并设置其边框为1像素：


img[alt="logo"] {
  border: 1px solid black;
}

这段代码选择了所有具有alt属性值为"logo"的图片，并将它们的边框设置为1像素的黑色实线。