子选择器和后代选择器
有例子讲解
·
子元素选择器
用大于符号(>)（子结合符），用于选择指定标签元素的第一代子元素。
上例子理解！
<!DOCTYPE html>
<html lang="en">
<head>
<title>子元素选择器</title>
<style type="text/css">
p > em{color:blue;}
</style>
</head>
<body>
<p>这是<em>第一个</em>，然后这是<em>第二个</em></p>
<p>这是<em>第三个</em></p>
<p>这是<u><em>第四个</em></u></p>
</body>
</html>
例子解释：
p > em{color:blue;}意味着：选择作为p元素子元素所有em元素内容应用样式- 像“第二个”这样，仍然是p的第一代子元素，样式生效
- 虽然第一行的p已经应用过该样式，但是“第三个”仍是p的第一代子元素，样式生效（以上两个例子说明子元素选择器可以任意次数使用）
- “第四个”不是p的第一代子元素，而是em是第一代子元素，故没法使用p的子元素选择器
.example > span{
border:1px solid red;
}
这个要怎么理解呢？
首先可以等价为*.example > span 这行代码会使得任意元素中，含class名为example的子元素span加上红色边框
后代选择器
又称为“包含选择器”
使用空格作为结合符。与子元素选择器相比，>作用于元素的第一代后代，空格作用于元素的所有后代。
后代选择器的使用是非常有益的，如果父元素内包括的HTML元素具有唯一性，则不必给内部元素再指定class或id，直接应用此选择器即可。
<!DOCTYPE html>
<html lang="en">
<head>
<title>后代选择器</title>
<style type="text/css">
.example em{color:red;}
</style>
</head>
<body>
<h1 class="example">啦啦啦<em>啦啦啦啦</em>啦<u><em>啦啦</em></u></h1>
</body>
</html>
可以看到，就算最后两个“啦啦”不是h1（class=example）第一代后代也边红了。
写在最后
打卡第十天了！明天想看看有没有关于选择器的实战，感觉学了一通也不太记得住，如果多重嵌套的话应该会遇到问题。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)