子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
语法:
/*元素1是父级 元素2是最近以及子级*/
元素1 > 元素2 { 样式声明 }
上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。
例如:
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
- 元素1 和 元素2 中间用 大于号 隔开
- 元素1 是父级,元素2 是子级,最终选择的是元素2
- 元素2 必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
联系:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 复合选择器之后代选择器 */
/* .nav a {
color: red;
} */
/* 复合选择器中的子选择器中父级和子级之间需要>号 */
.nav>a {
color: pink;
}
</style>
</head>
<body>
<div class="nav">
<a href="http://www.baidu.com">子级</a>
<p>
<a href="http:///www.baidu.com">子级的下一级</a>
</p>
</div>
</body>
</html>