033 - 还能这么玩
本帖最后由 不二如是 于 2019-11-5 08:41 编辑上一集：032 - 朋友，你会Ollie吗？
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
代码：
基于上面的代码抽象出的层级图：
不带图片的默认样式：
接下来通过不同选择器的时候，来对页面进行样式设置。
交集选择器
语法：
元素.类 || 元素#id
{}
对值是指定 类/id 的元素设置样式。
在 style 中添加：
span.content{
border: thin black solid;
}
然后找到下图中的两个 span 元素，添加 class 属性其值为 content：
刷新页面：
只有满足 类是 content 的 span 元素才会添加对应的样式。
并集选择器
语法：
选择器1,选择器2,选择器3,...
{}
为选择器1,2,3,...添加指定样式。
在 style 元素中添加：
h2,p,span{
font-style: italic;
}
为 h2，p，span，共同添加样式，效果：
常常用来将多个元素共有的样式，放在一起写，精简代码。
后代选择器
语法：
选择器1 选择器2 选择器3 ...
{}
为选择器1中的选择器2中的选择器3中的...设置样式。
注意，中间要用空格隔开。
将上面的：
span.content{
border: thin black solid;
}
修改为：
body .content{
border: thin black solid;
}
body 中的类是 .content 的元素都会变为：
注意是所有的后代都会被选中。
子元素选择器
语法：
选择器1 > 选择器2
{}
对选择器1中符合直接子元素的选择器2设置样式。
要理解直接子元素，先看一个简单的 html 代码：
<div>A
<div>1
<div>a</div>
<div>b</div>
</div>
<div>2</div>
<div>3</div>
</div>
其中 1 和 2 和 3 是 A 的直接子元素，a 和 b 是 1 的直接子元素。
而 a 和 b 算是 A 的后代元素，不是直接子元素。
修改上面的 style 中：
body .content{
border: thin black solid;
}
为：
body > .content{
border: thin black solid;
}
效果：
因为是 body 中的直接子元素 .content 才会设置样式，即只有类是 content 的 p 元素。
那两个类是 content 的 span 元素不是直接子元素，所以没有样式
相邻兄弟选择器
语法：
选择器1 + 选择器2
{}
为具有相同父元素且同级的选择器1相邻的选择器2设置样式。
在 style 中添加：
.slogan + p{
color: yellow;
}
效果：
为具有共同父元素且同级的 .slogan 相邻的 p 元素进行样式设置。
同级意味着上面 div 中的 1 和 2 和 3，a 和 b。
等价于：
.slogan + .content{
color: yellow;
}
通用兄弟选择器
语法：
选择器1 ～ 选择器2
{}
为具有相同父元素且同级的选择器1 之后的选择器2 设置样式。
如果理解上面的相邻兄弟，那这个就很好理解，上面只是相邻的那个，通用则是全部。
仅修改 + 为 ～ ：
.slogan ~ .content{
color: yellow;
}
效果：
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：034 - 初学CSS的噩梦（Ⅰ）
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 不错哟~
支持{:10_256:} {:10_266:}
{:10_250:} 回复 学习了
页:
[1]