033-复合选择器 | css3
本帖最后由 liuzhengyuan 于 2020-3-16 20:54 编辑《零基础入门学习web开发》第33讲 还能这么玩 | 学习笔记
上一篇：032-朋友你会 ollie 吗？
复合选择器
标准代码：
<h1 class="a">aaaaaaaaaa</h1>
<h2 class="b">bbbbbbbbbbbbbbbb</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod dolorem dicta, vitae voluptas</p>
<p class="a">aaaaaaaaaaaaaa<span class="x">x</span></p>
<span class="a">aaaaaaaaaaaaaa</span>
<p class="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbb<span id="y">y</span></p>
1, 交集选择器
交集选择器：
element.class || element#id
{
CSS 样式;
}
Style:
p.a {
background-color: cornflowerblue;
}
h1.a {
text-align: center;
font-size: 40px;
}
运行效果：
2, 并集选择器
并集选择器：
element1, element2, element3,...
{
CSS 样式;
}
Style:
.x, #y {
background-color: pink;
color: red;
}
效果：
把代码改一改：
<h1 class="a">aaaaaaaaaa</h1>
<h2 class="b">bbbbbbbbbbbbbbbb</h2>
<div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod dolorem dicta, vitae voluptas</p>
<p class="a">aaaaaaaaaaaaaa<span class="x">x</span></p>
<span class="a">aaaaaaaaaaaaaa</span>
</div>
<p class="b">bbbbbbbbbbbbbbbbbbb<span id="y">y</span></p>
3,后代选择器
后代选择器选择elment1元素内部的element2元素：
element1 element2 element3,...
{
CSS 样式;
}
注意，中间空格不能漏
Style:
div p {
border: 2px solid black;
}
效果：
4,子元素选择器
子元素选择器，和后代选择器不一样，它只匹配直接子元素：
element1 > element2
{
CSS 样式;
}
Style:
body > p {
color: red;
}
效果：
5,相邻兄弟选择器
相邻兄弟选择器 选择具有相同父元素且同级的element1相邻的element2
element1 + element2
{
CSS 样式;
}
Style:
p.a + span {
font-size: xx-large;
}
效果：
6, 通用兄弟选择器
通用兄弟选择器 选择具有相同父元素且同级的element1之后的element2
它和相邻不一样，它匹配所有之后的选择器
element1 ~ element2
{
CSS 样式;
}
Style:
h1.a ~ .b {
font-style: italic;
}
效果：
· 更多（吹水笔记-不二如是）·
· 课后作业·
下一篇：034-初学 css 的噩梦（I）
页:
[1]