<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
.font1{
font-size: 1cm;
color: yellow;
}
/*交集选择器*/
h1.font1{
border: 2px dotted black;
}
h1#id1{
background-color:red;
}
</style>
</head>
<body>
<!--交集选择器-->
<p class="font1" >p标签</p>
<h1 class="font1" id="h_1">h1标签</h1>
<h1 id="id1">h1第二个标签</h1>
<p>p标签的第二个标签</p>
</body >
</html>
以上是标准后代选择器
下面是儿子代选择器,排除孙子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代-儿子</title>
<style type="text/css">
article >p{
border: 2px double blue;
}
</style>
</head>
<body>
<article>
<p>段落1</p>
<p>段落1</p>
<section>
<p>段落3</p>
<p>段落4</p>
</section>
</article>
</body>
</html>
下面是隔代选择器,也就是决定孙子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代-儿子</title>
<style type="text/css">
article * p{
border: 2px double blue;
}
</style>
</head>
<body>
<article>
<p>段落1</p>
<p>段落1</p>
<section>
<p>段落3</p>
<p>段落4</p>
</section>
</article>
</body>
</html>