子元素选择器
用大于符号(>)(子结合符),用于选择指定标签元素的第一代子元素。
上例子理解!
<!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)第一代后代也边红了。
写在最后
打卡第十天了!明天想看看有没有关于选择器的实战,感觉学了一通也不太记得住,如果多重嵌套的话应该会遇到问题。