你不得不掌握的css选择器

前言

什么是 css 选择器呢？首先，css 是 Cascading Style Sheet（层叠样式表）的简称，CSS 技术用来美化 html 页面，来达到所预期的效果。而 css 选择器则可以帮助我们选中需要添加样式的特定标签。

选择器分类

在这里将选择器分为两大类：基本选择器和高级选择器

一、 基本选择器

二、高级选择器

选择器用法

由于选择器过多，这里只简单介绍几种常用的选择器

1. 通配符选择器
   通配符选择器经常用于样式的初始化，比如笔者经常用到的

上述样式表示去除掉所有元素默认的 margin、padding 值，优点是简单粗暴一次性完成所有元素的样式重置，缺点是不能精准控制
2. 标签选择器
选择我们所需要的标签并设置样式,这里会选择所有该标签元素并改变样式

效果：

3. 类选择器

给标签取 class 名，以点（.）加 class 名开头，选择所有该 class 名的元素

效果：

4. id 选择器

给标签取 id 名，以#加 id 名开头，具有唯一性，选择”id = ‘wrap’”的元素

效果：

5. 子选择器

以>隔开父子级元素

效果：

6. 后代选择器

以空格隔开包含关系的元素

效果：

7. 兄弟选择器

以~隔开兄弟关系的元素，所有兄弟元素

效果：

8. 相邻选择器

以+隔开相邻关系的元素,只有一个

效果：

9. 属性选择器

[type=text]修饰属性为type=text的元素

效果：

总结

熟练掌握 css 选择器的运用，将会为我们对页面的控制做到手到擒来，减少弯路。