第十八课--组合选择符
程序员文章站
2022-07-14 18:59:40
...
四种组合方式: 后代选择器(以空格分隔)--后代选择器用于选取某元素的后代元素。 子元素选择器(以大于号分隔）--与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 相邻兄弟选择器（以加号分隔）--相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。 普通兄弟选择器（以破折号分隔）--后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择符</title>
</head>
<style>
/*后代选择器(以空格分隔)*/
div p {
background-color: yellow;
}
/*子元素选择器(以大于号分隔）*/
div > p {
background-color: green;
}
/*相邻兄弟选择器（以加号分隔）*/
div + p {
background-color: #1b6d85;
}
/*普通兄弟选择器（以破折号分隔）*/
div ~ p {
background-color: red;
}
</style>
<body>
<p>文字信息</p>
<div>
<p>文字信息</p>
<p>文字信息</p>
<p>文字信息</p>
<p>文字信息</p>
<p>文字信息</p>
<p>文字信息</p>
<span>
<p>文字信息</p>
<p>文字信息</p>
<p>文字信息</p>
<p>文字信息</p>
<p>文字信息</p>
</span>
</div>
<p>文字信息</p>
<h2>123</h2>
<p>文字信息</p>
</body>
</html>