h1,p {
/* 群组选择器 */
color: red;
}
.b {
color: plum;
}
#big {
color: palevioletred;
}
div p {
/* 后代选择器 */
color: aqua;
}
div li p {
color: blueviolet;
}
div>p {
/* 子代:直接子级 */
color: hotpink;
}
[class] {
/* 哪个标签有class */
color: brown;
}
</style>
</head>
<body>
<!-- <p>通配</p>
<p class="b">class标签 </p>
<p class="b" id="big">两个类名 </p>
<ul>
<li>111111</li>
<li class="b ">222222</li>
<li>333333</li>
</ul> -->
<p>CSDN</p>
<h1>大标题</h1>
<span>选项1</span>
<span class="ok">选项2</span>
<span class="yes">选项3</span>
<div>
<p>C1</p>
<ul>
<li>
<p>后代</p>
</li>
<li>
<p>群组</p>
</li>
<li>
<p>选择器</p>
</li>
</ul>
<img src="" alt="">
</div>
<div>
<p>C2</p>
<img src="" alt="">
</div>
</body>
</html>