后代、子代选择器
在HTML中普遍存在标签的嵌套,观察如下HTML5代码。
<div>
<span>111</span>
<ul>
<li>
<span>222</span>
</li>
<li>
<span>333</span>
</li>
</ul>
</div>
后代:div标签中包含的所有部分都为div的后代,即111、222、333部分都为div的后代。
子代:只有111与ul标签为div的子代,而222与333不是其子代。
- 后代选择器
- father标签 [空格] 后代标签
- 子代选择器
- father标签 [>] 子代标签
交集、并集选择器
交集选择器——观察如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.thisClass {
color: #ff0000;}
</style>
</head>
<body>
<div class="thisClass">111</div>
<span class="thisClass">222</span>
<div>333</div>
</body>
</html>
13、14行的两个标签类名都为thisClass
但是如果只想让111变为红色,则需用交集选择器,如第8行所示。
并集选择器——观察如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, span, p {
color: #f00;
}
</style>
</head>
<body>
<div>111</div>
<span>222</span>
<p>333</p>
</body>
</html>
若想让div,span,p标签的内容都为红色,则用并集选择器,如第8行开始。
- 交集选择器
- 标签名 [点] 标签名
- 并集选择器
- 标签名 [逗号] 标签名