哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第二阶段 CSS307 CSS复合选择器

1 交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special

记忆技巧：

交集选择器是并且的意思。即……又……的意思

比如：p.one选择的是：类名为one的段落标签。

用的相对来说比较少，不太建议使用。

2 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器i选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧:

并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

比如.one,p,#test{color；#F00;}表示.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

3 后代选择器

后代选择器又称为包含选择器，用来选元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

4 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

白话：这里的子指的是亲儿子不包含孙子重孙子之类。

比如：.demo>h3{color:red;}说明h3一定是demo的亲儿子。demo元素包含h3

5 课堂练习-测试选择器

在不修改以上代码的前提下，完成以下任务：

1.链接登录的颜色为红色同时主导航栏里面的所有的链接改为蓝色（简单）

2.主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等）

3.主导航栏里面的一级菜单链接文字颜色为绿色。（难）

6 属性选择器（一）

7 属性选择器（二）

8 伪元素选择器（一）

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

E::first-line文本第一行；

E::selection可改变选中文本的样式；

伪元素用双冒号来开始，跟之前学的来对比下：

.demo 类选择器，一个点

:first-child 伪类选择器，两个点

::first-letter 伪元素选择器，四个点

9 伪元素选择器（二）

E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合 content属性使用。

E:after、E:before在旧版本里是伪元素，CSS3的规范里”:”用来表示伪类，”::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E:after、E:before，这样做的目的是用来做兼容处理。

E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解

“："与"∷"区别在于区分伪类和伪元素

效果是：俺今年18岁

before和 after在盒子div的内部前面插入或者是内部后面插入

10 CSS书写规范

开始就形成良好的书写规范，是你专业化的开始。

空格规范

【强制】选择器与 { 之间必须包含空格。

示例：.selector { }

【强制】属性名与之后的：之间不允许包含空格

：与属性值之间必须包含空格

示例：font-size：12px；

选择器规范

【强制】当一个rule包含多个 selector时，每个选择器声明必须独占一行。

示例：

.post,

.page,

.comment {

line-height: 1.5;

}

【建议】选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。

示例：

.comment .avatar {}

【强制】属性定义必须另起一行。

示例：

.selector {

margin: 0;

padding: 0;

}​

【强制】属性定义后必须以分结尾。如上

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《08 CSS背景及应用》小伙伴们不要错过哟！