CSS之毗邻选择器与普通兄弟选择器的区别

最新推荐文章于 2023-10-16 00:42:35 发布

weixin_30550081

最新推荐文章于 2023-10-16 00:42:35 发布

阅读量442

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Andy963/p/7594804.html

版权

CSS之毗邻选择器与普通兄弟选择器的区别

在一些教程网站上只看到兄弟选择器的说法，也就是加号（+），但是偶然听说了毗邻兄弟选择器的说法

所以特意实验一下，找一下区别。

从字面意思来看：毗邻兄弟选择器即是指相邻的兄弟，而普通兄弟选择器则可以不一定刚好相邻，比如

中间间隔了其它元素。

看下面实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>毗邻选择器与普通兄弟选择器</title>
    <link rel="stylesheet" type="text/css" href="*.css"/>
    <script language="javascript" type="text/javascript"></script>
    <style>
        .one+.three{
           color:red;
        }
    </style>
</head>
<body>
    <div class="one">one</div><div class="two">two</div>
    <div class="three">three</div>
</body>
</html>

上面的毗邻兄弟选择器运行结果是：

修改成普通兄弟选择器试试：

 <style>
        .one~.three{
           color:red;
        }
    </style>

结果是：

对比结果我们发现，毗邻兄弟选择器并没有对指定的three这个标签起作用，因为它们中间间隔了two

,而普通兄弟选择器则不存在这种问题，只要是兄弟（同级），它就能作用到。

posted on 2017-09-26 07:51 Andy_963 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/Andy963/p/7594804.html

weixin_30550081

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之毗邻选择器与普通兄弟选择器的区别

CSS之毗邻选择器与普通兄弟选择器的区别在一些教程网站上只看到兄弟选择器的说法，也就是加号（+），但是偶然听说了毗邻兄弟选择器的说法所以特意实验一下，找一下区别。从字面意思来看：毗邻兄弟选择器即是指相邻的兄弟，而普通兄弟选择器则可以不一定刚好相邻，比如中间间隔了其它元素。看下面实例：<!DOCTYPE ht...
复制链接

扫一扫