共计 2930 个字符，预计需要花费 8 分钟才能阅读完成。
CSS 选择器，先来学习简略选择器。
CSS 选择器是用来“寻找”或“抉择”，你想要定义款式的 HTML 元素的。咱们后面学习过一个最简略的选择器——比方，这个 H1 元素就是选择器，咱们称之为元素选择器。有了选择器，浏览器能力晓得为谁定义款式！
说到这，你会好奇，CSS 还有别的选择器吗？实际上，CSS 抉择元素的形式有很多，咱们能够把 CSS 选择器分为五类：
第一类，简略选择器：依据名称、ID、类别来抉择元素。
第二类，组合选择器：依据元素之间的特定关系来抉择元素。
第三类，伪类选择器：依据某种状态来抉择元素。
第四类，伪元素选择器：为一个元素的指定局部设置款式。
第五类，属性选择器：依据一个属性或属性值来抉择元素。
这一节，咱们解说最根本的 CSS 选择器——简略选择器。
首先学习元素选择器。顾名思义，它是依据元素名称来抉择 HTML 元素的。咱们来做个例子：
创立一个文件夹 004-css-selectors，在文件夹里创立一个 simple-selectors.html 文件。构建根底代码。
增加 h1 和 p 元素，别离填入一些文本。在 head 元素外部增加 style 元素。定义元素选择器 h1，增加款式 text-align center，color purple；定义元素选择器 p，增加款式 color red。保留文件。
在浏览器中关上文件，题目和段落的款式就增加好了。
<style>
h1 {
text-align: center;
color: purple;
}
p {color: red;}
</style>
<body>
<h1>
浠浠呀老师，女生学前端好找工作吗？</h1>
<p>
学前端的女生十分好找工作，同样技术水平的男生和女生来面试，女生的录取率很高。</p>
</body>
咱们再增加一个段落。此时两个段落的款式是雷同的！
<body>
<h1>
浠浠呀老师，女生学前端好找工作吗？</h1>
<p>
学前端的女生十分好找工作，同样技术水平的男生和女生来面试，女生的录取率很高。</p>
<p>
咱们前端部门的男女比例差不多是 16：1，然而后端部门的程序员简直都是男生，木讷又不爱交换，遇到咱们前端的女生也好改 bug，也能更好的互相帮助，推动工作进度！</p>
</body>
如果咱们要求第二段居中对齐，该怎么办呢？
咱们批改 p 元素选择器的款式，增加款式 text-align center。很显然，两个段落都居中对齐了，不能满足咱们的需要。
此时，id 选择器能够帮到咱们。id 选择器是应用一个 HTML 元素的 id 属性来抉择一个特定的元素。一个元素的 id 在一个页面中是惟一的，所以 id 选择器 是用来抉择一个惟一元素的！
要抉择一个具备特定 id 的元素，能够写一个井号（#）字符，而后是该元素的 id。比方 #para2。
咱们就在第二个 p 元素上定义属性 id，它的值设置为 #para2。
在 style 元素里定义选择器 #para2，空格，花括号，编写款式 text-align center。
这样，第二个段落就独自居中对齐了！
切记，id 名称不能以数字结尾！
比方将 id 的值和选择器改为 #1para2。
咱们看，第二个段落不再居中，款式生效了！记得把 id 再改回来。
当初有个新需要，题目和第二个段落都须要增加斜体成果，该如何实现呢？
能想到的办法是，别离在 元素选择器 和 id 选择器上增加款式：font-style italic。font-style 申明字体格调，italic 示意斜体。无关字体的款式申明，咱们在后续的课程中会具体解说。
在浏览器里察看，题目和第二个段落都歪斜了。
可是，同一个款式申明写了两遍，有没有更简洁的办法呢？
有的，能够应用类选择器实现。类选择器能够抉择具备特定 class 属性的 HTML 元素。要抉择具备特定类别的元素，须要写一个点（.）字符，前面紧跟类别名称。比方：.italic
咱们在第二个 p 元素上定义 class 属性，值设置为 italic。在 h1 元素上也定义 class 属性，值也设置为 italic。
接下来，咱们把这两句代码正文，在 style 元素里定义选择器 .italic，空格，花括号，编写款式 font-style italic。
这样，同样实现了题目和第二个段落都歪斜的成果。
如果想给第二个段落再增加一个下划线，也很容易！在 .italic 选择器上增加款式 text-decoration underline。text-decoration 申明文本润饰款式，underline 示意下划线。
仔细观察，咱们发现，第二个段落尽管增加了下划线，可题目也被增加了下划线。
回到代码，咱们钻研一下：也不能在 p 元素选择器里增加这个款式，这样两个段落都被增加了下划线。同时咱们又发现，类名为 italic，把下滑线的款式申明放进去，语义上也不失当。
那么，咱们须要再定义一个类选择器，比方 .deco，增加款式 text-decoration underline。
问题又来了，咱们如何将新款式利用到第二个 p 元素上呢？再定义一个 class 属性吗？咱们试试。
再定义一个 class 属性，值为 deco。
没起作用！新款式的定义被浏览器疏忽了！
其实，咱们能够在第一个 class 属性值的前面加一个空格，再设置一个款式 deco。
起作用了！歪斜居中的段落款式就增加好了。
如果想设置第三个款式，在 deco 后空格 增加就行了。可见，通过 class 属性能够实现多个款式的叠加。
另外，也能够在定义类选择器的时候，将元素的名称增加到点的后面。但要留神，这样的类选择器抉择的元素就更具体了。
比方，咱们在 deco 点的后面增加元素名称 p，再给 h1 元素 class 属性值追加一个款式类 deco。
咱们发现，题目并没有增加下划线！
和 id 选择器一样，class 的命名不能以数字结尾！
再仔细观察一下代码，题目和第二个段落的斜体，通过定义了一个类选择器，在元素上还要别离增加 class 属性值。
如果能同时抉择多个元素，再申明对立的款式就好了！
那就须要用到接下来学到的分组选择器，分组选择器抉择所有具备雷同款式的 HTML 元素。实现的办法就是将多个抉择器用逗号 (,) 分隔。比方 h1 逗号 p。（h1, p {}）
回到代码，删除原来斜体款式的定义和援用。
定义分组选择器 h1 逗号 p，申明款式 font-style italic。
咱们会发现，怎么第一个段落也歪斜了？（在浏览器里察看）
原来元素选择器 p 抉择范畴太大了，咱们将元素选择器 p，批改为 ID 选择器 #para2。
再来看成果，只有题目和第二个段落歪斜了。
如果咱们想给页面中的所有元素加个黄色背景，那有没有能抉择全副元素的选择器呢？
是有这样的选择器的他就是通用选择器。通用选择器抉择页面上的所有 HTML 元素。定义选择器的办法应用通配符星号。（*）
在 style 元素里的首行增加通用选择器星号，（*）申明款式 background-color yellow。
咱们看，整个页面平铺了黄色背景！在开发者工具的 elements 里查看所有元素，发现全副都增加了黄色背景。
为了验证假相，咱们再增加分组选择器 html 逗号 body（html, body），申明款式 background color aliceblue。
咱们再看成果，题目和段落确实增加上了黄色背景。
文章配套视频链接：https://www.bilibili.com/vide…
