<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器之兄弟选择器--通过兄标签定位弟标签</title>
</head>
<body>
<style>
div+p{/* 兄弟选择器，哥哥标签+弟弟标签，，，，修饰的是弟弟 */
color:red;
}
div+p+p+p{ color:blue;}/* 表示选择的是div下方的第三个p标签 */
</style>
<div>《小池》宋朝·杨万里</div>
<p>泉眼无声惜细流，</p>
<p>树阴照水爱晴柔。</p>
<p>小荷才露尖尖角，</p>
<span>无用的标签</span>
<p>早有蜻蜓立上头。</p>
</body>
</html>
解释一下：
以上代码中，我们使用div+p这样的选择器，选择了div下的第一个p标签，使用div+p+p+p选择了div下的第三个p元素。
执行结果如下：
|
窥视卡
雷达卡
发表于 2023-1-31 19:13:59
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-16 03:52:52
