人亦已歌 发表于 2023-1-31 19:13:59

CSS核心(十一)复合选择器之兄弟选择器--通过兄标签定位弟标签


<!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-2-16 03:52:52

让我深有感触,感觉自已差太多太多了   

freelancer 发表于 2023-2-23 01:09:50

^感动,真的很有感情,我喜欢.祝福作者早日成为一个高手编程员

fuuingxia 发表于 2023-2-28 01:53:10

谢谢你们的留言 ,我看过深感领悟,想不到能在网上看到一些原本上书本看不到的东西。。。。

浪缘 发表于 2023-3-4 17:14:52

说的很有道理,我想我真的受益菲浅

龙胆 发表于 2023-3-11 02:23:55

受启发了思索中

huao927 发表于 2023-3-17 12:21:49

谢谢

sumren 发表于 2023-3-22 10:05:07

看到你经历,很受用。

jackie541 发表于 2023-3-28 06:03:05

well

cyc1100 发表于 2023-3-31 11:48:58

大大真的是有感受,想想大大的努力和胸襟,眼光也很是让我感叹。想想我自己,真的应该如大大所说!!!在此感谢大大!!!
页: [1] 2 3 4
查看完整版本: CSS核心(十一)复合选择器之兄弟选择器--通过兄标签定位弟标签