相邻选择器、兄弟选择器

最新推荐文章于 2023-06-27 15:36:23 发布

xuehyunyu

最新推荐文章于 2023-06-27 15:36:23 发布

阅读量583

点赞数

文章标签： html CSS3 相邻选择器兄弟选择器

本文链接：https://blog.csdn.net/xuehyunyu/article/details/71908270

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
       /* #li3 + li{      !*相邻选择器（渲染后面的相邻元素）：渲染列表项4*!
            color: red;
        }*/
       #li3 ~ li{        /*兄弟选择器：渲染li3后面的所有元素*/
           color: red;
       }
    </style>
    <title>其他选择器</title>
</head>
<body>

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li id="li3">列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
    <li>列表项7</li>
</ul>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xuehyunyu

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相邻选择器、兄弟选择器

/* #li3 + li{ !*相邻选择器（渲染后面的相邻元素）：渲染列表项4*! color: red; }*/ #li3 ~ li{ /*兄弟选择器：渲染li3后面的所有元素*/ color: red; } 其他选择器列表项1 列表项2
复制链接

扫一扫