CSS | 元素，元素选择器

CSS（Cascading Style Sheets）作为前端工程师必备的技能之一，负责为网页元素添加样式，实现网页设计的需求。本篇笔记将为大家介绍CSS中的元素和元素选择器。

元素

在HTML中，我们使用标签来定义元素。例如，<p>标签定义了一个段落元素，<h1> - <h6> 标签定义了标题元素，<div>标签定义了一个文档中的区块等等。在CSS中，我们可以通过元素选择器来为这些标签定义样式。

元素选择器

元素选择器是CSS中最基本的选择器，通过标签名来选取元素并定义样式。语法如下：

标签名 {
    样式1: 值1;
    样式2: 值2;
    ... 
}

例如，下面的CSS代码将为所有的<h1>元素设置为红色、加粗并居中：

h1 {
    color: red;
    font-weight: bold;
    text-align: center;
}

组合使用

除了单独为每种元素定义样式外，CSS还提供了一些组合使用的方式。下面列举几个常见的元素选择器组合方式。

选择后代元素

后代选择器（空格）可以选择某个元素内部的元素，如下所示：

div p {
    color: green;
}

上述代码将为所有在<div>元素中的<p>元素设置为绿色。

选择相邻的兄弟元素

相邻兄弟选择器（+）可以选取紧随在另一个元素后的元素。例如，下面的代码将为紧随在<h1>后面的第一个<p>元素设置样式：

h1 + p {
    font-style: italic;
}

选择同级的兄弟元素

通用兄弟选择器（~）可以选择某个元素后面的所有兄弟元素。例如，下面的代码将为所有紧随在<h1>后面的<p>元素设置为粗体：

h1 ~ p {
    font-weight: bold;
}

总结

本篇笔记介绍了CSS中的元素和元素选择器，希望大家可以通过这篇文章了解元素选择器的基本用法，从而更好地为网页添加样式。

不过需要注意，CSS选择器并不是越多越好，一个复杂的选择器往往意味着更加复杂的计算和更慢的页面响应速度。因此，我们在编写CSS样式时要尽量避免使用过于复杂的选择器，尽可能精简代码。