CSS兄弟选择器解析

CSS相邻兄弟选择器可以选中某个元素后面的元素,前提是需要两者在同一父元素下

2.3 层次选择器

澳门新葡亰8455下载app,层次选择器通过HTML的DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系,通过其中某类关系可以方便快捷地选定需要的元素。

例如下面文档结构:

2.3.1 层次选择器语法

选择器 类型 功能描述
E F 后代选择器(包含选择器) 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
E > F 子选择器 选择匹配的F元素,且匹配的F元素是所匹配的E元素的子元素
E + F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面
E ~ F 通用兄弟选择器 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
<div class="father">
<div class="one">我是第一个元素</div>
<p>紧随其后的一个元素</p>
<div class="box2"><p>第二个元素的子元素</p></div>
<p>紧随其后的三个元素</p>
<div class="box3">最后一个元素</div>
</div> 

2.3.2 浏览器兼容性

子选择器、相邻兄弟选择器和通用兄弟选择器要IE7及以上版本才支持,随着IE6的慢慢消失,层次选择器可以放心使用。

如需要选中第一个元素紧随其后的元素可以写入选择器

2.3.3 实战体验:使用层次选择器选择元素

在层次选择器中,后代选择器与子选择器是比较常用的,而对于相邻兄弟选择器和通用兄弟选择器而言,平时大家并不常使用,特别是CSS3选择器中新增的通用兄弟选择器。

  • 页面中有10个div元素,其中第四个div包含了2个div,另外第七个div包含了第八个,而第八个div又包含了第九个div,并且第九个div包含了第十个div。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用CSS3层次选择器</title>
    <style>
        *{margin: 0;padding: 0;}
        body{width: 300px;margin: 0 auto;}
        div{margin: 5px;padding: 5px;border: 1px solid #ccc;}
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4
        <div>5</div>
        <div>6</div>
    </div>
    <div>7
        <div>8
            <div>9
                <div>10</div>
            </div>
        </div>
    </div>
</body>
</html>

页面初步效果

为了更好的理清这些div的层次关系,可以先将示例中的body部分画一个DOM树形草图,如下所示:

body 的树形结构

.one+p

2.3.4 后代选择器

后代选择器(E F也称为包含选择器,作用就是可以选择某元素的后代元素。)

后代选择器两选择符之间必须以空格隔开,中间不能有任何其他符号插入。

*{margin: 0;padding: 0;}
body{width: 300px;margin: 0 auto;}
div{margin: 5px;padding: 5px;border: 1px solid #ccc;}
div div{background: orange;}    /* 后代选择器 */

使用后代选择器的效果

其中+为相邻兄弟选择器的连接符。

2.3.5 子选择器

子选择器(E > F)只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E
>
F表示选择了E元素下所有子元素F。与后代选择器不一样的是,后代选择器中F是E的后代元素,而子选择器中,F仅仅是E的子元素而已。

*{margin: 0;padding: 0;}
body{width: 300px;margin: 0 auto;}
div{margin: 5px;padding: 5px;border: 1px solid #ccc;}
div div{background: orange;}
body > div{background: green;}    /* 子选择器 */

使用子选择器的效果

如需要选中后置的元素(第三个元素),累计加号也是可行的。

2.3.6 相邻兄弟选择器

相邻兄弟选择器(E + F)可以选择紧接在另一个元素后的元素,它们具有一个相同的父元素。换句话说,E和F是同辈元素,F元素在E元素后面,并且相邻,这样就可以使用相邻兄弟选择器来选择F元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用CSS3层次选择器</title>
    <style>
        *{margin: 0;padding: 0;}
        body{width: 300px;margin: 0 auto;}
        div{margin: 5px;padding: 5px;border: 1px solid #ccc;}
        div div{background: orange;}
        body > div{background: green;}
        .active + div {background: lime;}    /* 相邻兄弟选择器 */
    </style>
</head>
<body>
    <!-- 为了说明相邻兄弟选择器,在此处添加一个类名active -->
    <div class="active">1</div>
    <div>2</div>
    <div>3</div>
    <div>4
        <div>5</div>
        <div>6</div>
    </div>
    <div>7
        <div>8
            <div>9
                <div>10</div>
            </div>
        </div>
    </div>
</body>
</html>

使用相邻兄弟选择器效果

.one+p+div+p 

2.3.7 通用兄弟选择器

通用兄弟选择器(E ~ F)是CSS3新增加的,用于选择某个元素后面的所有兄弟元素,他们和相邻兄弟选择器类似,需要在同一个父元素中。也就是说,E和F元素都是同辈元素,并且F元素在E元素之后,E
~ F将选中E元素后面的所有F元素。

*{margin: 0;padding: 0;}
body{width: 300px;margin: 0 auto;}
div{margin: 5px;padding: 5px;border: 1px solid #ccc;}
div div{background: orange;}
body > div{background: green;}
.active + div {background: lime;}
.active ~ div {background: red;}

使用通用兄弟选择器效果

通用兄弟选择器中的是与E元素相邻的后面兄弟元素F,其选中的是一个或多个元素;而相邻兄弟选择器中的仅是与E元素相邻并且紧挨的兄弟元素F,其选中的仅是一个元素。

网站地图xml地图