前端开发要点知识之一——CSS基本选择器在经历了将近一周的练手项目后，我们基本习惯了HTML+CSS制作网页的流程，不再

我正在参与掘金创作者训练营第5期，点击了解活动详情。在经历了将近一周的练手项目后，我们基本习惯了HTML+CSS制作网页的流程，不再轻易地使用被HTML 5抛弃的标签（如font、center、strike等）和属性。为了关联HTML元素和样式，需要熟练地使用CSS选择器。CSS选择器是一些用于精确定位我们需要添加样式的元素的匹配规则。在理解CSS选择器是如何工作之前，我们先复习一下网页中HTML元素的组织结构。

一个规范的网页中，全部元素（标签）组织成一个树形结构。元素（标签）可以有自己的子元素或属性。这些元素之间根据它们在树形结构的相对位置，参照人类社会的继承结构，呈现出几种关系：

父子关系，元素成直接包含关系。如”标签1“与”子标签11“、”子标签12“、”子标签13“成父子关系，”标签1“是其它三个标签的父标签，其它三个标签是”标签1“的子标签。同理”子标签11“是”子标签111“的父标签，而”子标签111“是”子标签11“的子标签。
后代关系，元素成直接或间接包含关系。如”子标签11“和”子标签111“都是”标签1“的后代。
兄弟关系，同一个元素的所有子元素成兄弟关系，如”标签1“和”标签2“互为兄弟关系。

在理解了HTML元素的组织结构和相互关系后，可以将CSS选择器分成四大类：

基本选择器
属性选择器
伪选择器
组合选择器

下面我们通过一些简单的示例依次进行了解。

1. 基本选择器

基本选择器是其它选择器的基石。总体上又能被分为4种。

1.1 `*`选择器（通配符选择器）

*选择器可以选中所有元素，被许多开发者用来重置（Reset）一些标签的默认属性。

* {
 -webkit-box-sizing:border-box;
 box-sizing:border-box
}

上面的代码将网页中所有元素的box-sizing属性都设置为border-box，统一了元素的宽度计算内容。

注：来自Tailwindcss框架（tailwindcss.com/）。

* {
 margin: 0;
 padding: 0;
}

利用通配符选择器重置默认样式中由margin或padding带来的缩进。不过由于*选择器所波及的范围实在太广了，以至于会在一定程度上影响浏览器性能，建议不要运用在这种场合，LESS IS MORE! 。

1.2 标签选择器

直接使用HTML标签名称作为选择器，能够选取网页中全部同类型的元素。如果想统一定制某类标签的默认属性，一定不能错过这个选择器。

body {
 background: #f2f2f2;
}

同一个网页只会出现一次html或body标签，这种情况下直接使用标签名作为选择器已经可以足够精准的选中目标。实际上大部分开发者还会使用标签选择器来重置（Reset）标签的默认属性。这样做由于指代明确，比使用通配符选择器的性能要更好，并且更利于样式的调试和维护。

html, body, div, h3, li, ul {
    margin: 0;
    padding: 0;
}

1.3 类选择器

标签选择器的选取范围比通配符选择器明显缩小了。但在实际的网页开发过程中，并不是所有同类型的元素，它的样式就完全一致。比如我们常用无序列表ul实现导航菜单和新闻列表，但它们的样式却千差万别。为了能够部分选取页面中的一些标签元素，而不是全部该类型元素，结合HTML标签的class属性，CSS引入了类选择器的概念。它使用类名，也就是class属性的值作为选择器，用于选取class属性值中包含指定类名的元素。类选择器可以说是前端开发中应用最广泛的一类选择器。它有以下几个特点：

类选择器的规则为. + 类名（点号+类名）。
同一个元素可以拥有多个类名，类名之间使用空格隔开。这个特点可以实现对样式更细粒度的重用，同时使得对元素状态样式的控制更加灵活。比如模块的显示与隐藏属性切换。
不同类型的元素可以使用相同的类名。让HTML结构的实现更加灵活，具体样式不会标签类型产生限制。比如同一套样式可以让a标签、button标签甚至span标签呈现相同的按钮样式，只需要它们拥有相同的类名。

<button class="ui button">
  Button
</button>

<div class="ui button">
  Focusable
</div>

.button {
  cursor: pointer;
  display: inline-block;
  min-height: 1em;
  outline: 0;
  border: none;
  vertical-align: baseline;
  background: #e0e1e2 none;
  color: rgba(0,0,0,.6);
  font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
  margin: 0 .25em 0 0;
  padding: .78571429em 1.5em .78571429em; 
}

注：来自Semantic-UI框架，button类可以作用在不同类型的标签上，实现同样的视觉效果。

上面提到一个元素可以同时拥有多个用空格隔开的类。我们可以使用单个类名作为选择器来设置样式，也可以同时使用多个类名组合成多类选择器。如上面代码中的按钮可以通过如下选择器设置样式，表示选择同时拥有ui和button两个类的元素（类名的顺序没有关系）：

.ui.button {
  cursor: pointer;
  display: inline-block;
}

注意：.ui.button所使用的两个类之间不能有空格，否则会成为另外一类组合选择器。

1.4 ID选择器

上面三个选择器都有可能获取一组元素，如果只需要选取特定的一个元素，CSS还提供了ID选择器。ID选择器能够选择具有id属性，并且属性值与选择器名称相同的元素。在同一个网页中，id属性值必须是唯一的，因此ID选择器也就能够选择指定元素了。

ID选择器的规则为#+ID属性值。
ID属性值在同一个网页中唯一。

许多需要明确指定一个具体目标元素的场景，都会采用ID值与ID选择器。

<div id="id1">这个DIV有一个id属性!</div>
<div>这个div没有id属性.</div>

#id1 {
  background-color: skyblue;
}

ID选择器能够选择唯一元素的能力，除了用于设置CSS样式，更加广泛地应用于各种需要通过JavaScript操作指定内容的前端框架。如Swiper轮播图、Foundation框架的弹出框等。

前端开发要点知识之一——CSS基本选择器

1. 基本选择器

1.1 *选择器（通配符选择器）

1.2 标签选择器

1.3 类选择器

1.4 ID选择器

1.1 `*`选择器（通配符选择器）