[分享]css几种选择器举例

在CSS中，有很多不同种类的选择器可以用来选择HTML中的元素。这些选择器可以帮助我们更加精确地控制页面中的样式。下面我们来介绍几种选择器。/ 1. 元素选择器 / p { color: blue; ...

在CSS中，有很多不同种类的选择器可以用来选择HTML中的元素。这些选择器可以帮助我们更加精确地控制页面中的样式。下面我们来介绍几种选择器。

/* 1. 元素选择器 */
p {
  color: blue;
}

// 上面的代码作用是，选择所有的p元素，并将它们的颜色设置为蓝色。这个选择器很常用，因为它可以对页面中的所有p元素进行修改。

/* 2. 类选择器 */
.intro {
  font-size: 18px;
}

// 上面的代码作用是，选择所有class属性为intro的元素，并将它们的字体大小设置为18像素。这个选择器比较常用，因为它可以为页面中的一些特定元素设置样式。

/* 3. ID选择器 */
#header {
  background-color: gray;
}

// 上面的代码作用是，选择id属性为header的元素，并将它们的背景颜色设置为灰色。这个选择器比较独特，因为ID属性一般只在页面中出现一次。

/* 4. 后代选择器 */
article p {
  font-weight: bold;
}

// 上面的代码作用是，选择article元素下的所有p元素，并将它们的字体加粗。这个选择器比较实用，因为它可以帮助我们针对特定的HTML嵌套结构设置样式。

/* 5. 相邻兄弟选择器 */
h2 + p {
  color: red;
}

// 上面的代码作用是，选择紧接着h2元素之后的p元素，并将它们的颜色设置为红色。这个选择器比较少用，但是可以帮助我们精确地选择HTML结构中的某些元素。

总结一下，以上几种选择器都很常用，我们可以根据不同的需求自由地选择合适的选择器来进行样式修改。