CSS Selectors 关系标签
阳光辉
在< style >标签中
div p {} : div标签中的所有p标签; div>p {} : div标签中的子标签§;
div+p {} : div标签下边的邻居标签; div~p {} : div标签下边所有的同级p标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>关系选择符</title>
<meta name="Keywords" content="关键字">
<meta name="description" content="简介">
<!-- 关系标签 -->
<style>
/* div标签中的所有p标签 */
div p {
color: #027e02;
}
/* div标签中的子标签(p) */
div > p {
background-color: darkseagreen;
}
/* div标签下边的邻居标签 */
div + p {
color: #10f574;
}
/* div标签下边所有的同级p标签 */
div ~ p {
color: aqua;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor.</p>
<p>Accusantium, commodi voluptate.</p>
<p>Blanditiis, qui saepe?</p>
<h2>
<h3>
<p>Lorem ipsum dolor.</p>
</h3>
</h2>
</div>
<p>Lorem ipsum dolor.</p>
<p>Commodi, consequatur, numquam.</p>
</body>
</html>
类似资料：