Web前端系列课程29个阶段，坚持学习3个月

大家好，我是作者《未来》。本期分享的内容是一系列网络前端课程。这个系列共有29个阶段。继续学习3个月，成为web前端高手！

志同道合的朋友跟我一起学习交流！

第 2 阶段 CSS307 CSS 复合选择器

1 交叉点选择器

交集选择器由两个选择器组成，第一个是标签选择器，第二个是类选择器，两个选择器之间不能有空格，如h3.special

记忆技巧：

交集选择器是和手段。这意味着……和……

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

用的比较少，不推荐使用。

2 联合选择器

联合选择器（CSS选择器分组）是通过逗号连接各种选择器形成的。任何形式的选择器（包括标签选择器、类选择器、i 选择器等）都可以用作联合选择器。部分。如果某些选择器定义了相同的样式，或者某些相同的样式伪元素选择器link，您可以使用联合选择器为它们定义相同的 CSS 样式。

记忆技巧：

并集选择器的含义，也就是说只要选择器之间用逗号隔开，所有的选择器都会执行下面的样式。

例如，.one、p、#test{color; #F00;} 表示三个选择器 .one 和 p 和 #test 将执行红色。通常用于集体申报。

3 后代选择器

后代选择器伪元素选择器link，也称为包含选择器，用于选择元素或元素组的后代。当标签嵌套时，内标签成为外标签的后代。

后代可以选择这样做。或者，它可以选择任何包含的标签。

4 子元素选择器

子元素选择器只能选择元素的子元素。写法是将父标签写在前面，子标签写在后面，中间用>连接。请注意，符号的左侧和右侧保留了一个空间。

白话：这里的儿子是指自己的儿子，不包括孙子和孙子。

例如：.demo>h3{color:red;} 表示 h3 必须是 demo 的儿子。演示元素包含 h3

5 类练习 – 测试选择器

在不修改上述代码的情况下完成以下任务：

1.链接登录的颜色为红色，主导航栏的链接全部变为蓝色（简单）

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

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

6 个属性选择器（一）

7 个属性选择器（二）

8 个伪元素选择器 (一）

E::首字母文本的第一个单词或字符（如中文、日文、韩文等）

E::first-line text 第一行；

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

伪元素以双冒号开头，与我们之前学到的对比：

.demo 类选择器，一个点

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

::首字母伪元素选择器，四个点

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 插入到 box div 的内部之前或 inside 之后

10 个 CSS 编写规范

从一开始就形成良好的写作习惯是您专业化的开始。

空白规范

【强制】选择器和{之间必须有空格。

示例：.selector { }

[强制] 属性名称与以下内容之间不允许有空格：

: 必须在属性值和属性值之间包含一个空格

示例：字体大小：12px；

选择器规范

【强制】当一个规则包含多个选择器时，每个选择器声明必须在单独的一行。

例子：

。邮政，

。页，

。评论 {

行高：1.5；

}

【建议】选择器的嵌套层级不要超过3级，后面的限定条件尽量精确。

例子：

.comment .avatar {}

[强制] 属性定义必须从新行开始。

例子：

.选择器{

边距：0；

填充：0；

}​

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

看不懂不要气馁，后续分享中我会继续讲解，只要按照我分享的课程从头到尾学习，每篇文章读三遍，之后一个月，回去看看之前的文章。感觉很简单。

本章结束，下一篇分享《08 CSS背景与应用》的小伙伴们不要错过哦！