038-结构伪类选择器（I）| css3
本帖最后由 liuzhengyuan 于 2020-3-25 21:57 编辑《零基础入门学习web开发》第38讲 初学 css 的噩梦 V | 学习笔记
上一篇：037-初学 css 的噩梦 IV
拓展 Emmet 语法规则
1, :root
:root：匹配代码的根元素
Style:
:root {
background-color: yellow;
}
Main:
<p>I love <strong>FishC</strong>.</p>
运行效果：
2, :empty
:empty：匹配空元素（用处不大）
Style:
:empty {
background-color: yellow;
}
Main:
<p></p>
<p>I love <strong>FishC</strong></p>
<p></p>
效果：
啥都没变
但是撑开就有效果了↓↓
:empty {
width: 100px;
height: 20px;
background-color: yellow;
}
之后开始重要了{:10_305:}统一代码↓
<p>I love <strong>FishC</strong></p>
<p>aaaaaaaaa</p>
<span>bbbbbbbbbbbbbbbbbb</span>
<div class="c">ccccccccccccccc</div>
<p>I have a <q>dddddddd</q> and <span>4444444444</span> </p>
3, :first-child, :first-of-type
:first-child：选择器用于匹配父元素下第一个子元素。
:first-of-type：选择器匹配父元素下相同类型的子元素中的第一个。
Style:
p:first-child {
background-color: yellow;
}
span:first-of-type {
background-color: #CCCCCC;
}
div:first-child {
background-color: black;
color: white;
}
运行效果：
第2个 first-child 没起效果
因为它只匹配第一个元素
<p>I love <strong>FishC</strong></p>
<p>aaaaaaaaa</p>
<span>bbbbbbbbbbbbbbbbbb</span>
<div class="c">ccccccccccccccc</div>
<p>I have a <q>dddddddd</q> and <span>4444444444</span> </p>
4, :last-child, :last-of-type
]:last-child：选择器用于匹配父元素下最后子元素。
:last-of-type：选择器匹配父元素下相同类型的子元素中的最后
Style1:
p:last-child {
background-color: black;
color: white;
}
运行效果：
没效果，因为 VS code 在后面加了一个 Script 代码。 但是用 last-of-type 就没问题↓
Style2:
p:last-of-type {
background-color: black;
color: white;
}
<p>I love <strong>FishC</strong></p>
<p>aaaaaaaaa</p>
<span>bbbbbbbbbbbbbbbbbb</span>
<div class="c">ccccccccccccccc</div>
<p>I have a <q>dddddddd</q> and <span>4444444444</span> </p>
3, :only-child, :only-of-type
:only-child：选择器用于匹配父元素下唯一子元素。
:first-of-type：选择器匹配父元素下相同类型的子元素中的唯一元素。
Style:
strong:only-child {
border: 2px solid black;
}
q:only-child {
color: blue;
}
运行效果：
第2个 only-child 没起效果
因为它只匹配尤唯一子元素的元素
改成 only-of-type 就有效果了
strong:only-child {
border: 2px solid black;
}
q:only-of-type {
color: blue;
}
（这一讲我做了好几天{:10_277:} ）
· Emmet 语法规则（让你编写代码的速度快到飞起） ·
· 更多（吹水笔记-不二如是）·
· 课后作业·
下一篇：039-结构伪类选择器（II）
页:
[1]