033 - 还能这么玩

不二如是

上一集：032 - 朋友，你会Ollie吗？

---

哈哈，废话不多说了，#敲黑板时刻！

---

在线视频：传送门

---

课程思维导图

猛戳

                               
登录/注册后可看大图

超清

---

代码： 32.zip (133.05 KB, 下载次数: 52, 售价: 2 鱼币)

2019-10-13 10:15 上传

点击文件名下载附件

基于上面的代码抽象出的层级图：

不带图片的默认样式：

接下来通过不同选择器的时候，来对页面进行样式设置。


交集选择器

语法：

1. 元素.类 || 元素#id
   
2. {}

复制代码

对值是指定 类/id 的元素设置样式。

在 style 中添加：

1. span.content{
   
2.             border: thin black solid;
   
3.         }

复制代码

然后找到下图中的两个 span 元素，添加 class 属性其值为 content：

刷新页面：

只有满足 类是 content 的 span 元素才会添加对应的样式。


并集选择器

语法：

1. 选择器1,选择器2,选择器3,...
   
2. {}

复制代码

为选择器1,2,3,...添加指定样式。

在 style 元素中添加：

1. h2,p,span{
   
2.             font-style: italic;
   
3.         }

复制代码

为 h2，p，span，共同添加样式，效果：

常常用来将多个元素共有的样式，放在一起写，精简代码。


后代选择器

语法：

1. 选择器1 选择器2 选择器3 ...
   
2. {}

复制代码

为选择器1中的选择器2中的选择器3中的...设置样式。

注意，中间要用空格隔开。

将上面的：

1.   span.content{
   
2.             border: thin black solid;
   
3.         }

复制代码

修改为：

1. body .content{
   
2.             border: thin black solid;
   
3.         }

复制代码

body 中的类是 .content 的元素都会变为：

注意是所有的后代都会被选中。


子元素选择器

语法：

1. 选择器1 > 选择器2
   
2. {}

复制代码

对选择器1中符合直接子元素的选择器2设置样式。

要理解直接子元素，先看一个简单的 html 代码：

1. <div>A
   
2.         <div>1
   
3.             <div>a</div>
   
4.             <div>b</div>
   
5.         </div>
   
6.         <div>2</div>
   
7.         <div>3</div>
   
8.     </div>

复制代码

其中 1 和 2 和 3 是 A 的直接子元素，a 和 b 是 1 的直接子元素。

而 a 和 b 算是 A 的后代元素，不是直接子元素。

修改上面的 style 中：

1. body .content{
   
2.             border: thin black solid;
   
3.         }

复制代码

为：

1. body > .content{
   
2.             border: thin black solid;
   
3.         }

复制代码

效果：

因为是 body 中的直接子元素 .content 才会设置样式，即只有类是 content 的 p 元素。

那两个类是 content 的 span 元素不是直接子元素，所以没有样式


相邻兄弟选择器

语法：

1. 选择器1 + 选择器2
   
2. {}

复制代码

为具有相同父元素且同级的选择器1相邻的选择器2设置样式。

在 style 中添加：

1. .slogan + p{
   
2.           color: yellow;
   
3.         }

复制代码

效果：

为具有共同父元素且同级的 .slogan 相邻的 p 元素进行样式设置。

同级意味着上面 div 中的 1 和 2 和 3，a 和 b。

等价于：

1. .slogan + .content{
   
2.           color: yellow;
   
3.         }

复制代码

通用兄弟选择器

语法：

1. 选择器1 ～ 选择器2
   
2. {}

复制代码

为具有相同父元素且同级的选择器1 之后的选择器2 设置样式。

如果理解上面的相邻兄弟，那这个就很好理解，上面只是相邻的那个，通用则是全部。

仅修改 + 为 ～ ：

1. .slogan ~ .content{
   
2.           color: yellow;
   
3.         }

复制代码

效果：

---

课后作业，完成了吗？

传送门

---

                               
登录/注册后可看大图

下一集：034 - 初学CSS的噩梦（Ⅰ）

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅 ）

一个账号

不错哟~
支持

13998929493

香辣巨无霸

心驰神往

回复