您的位置：首页 > Web前端 > CSS

CSS3选择器——2、层次选择器

2015-02-14 17:49 369 查看

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="utf-8" />
<title>CSS3选择器——2、层次选择器</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
width: 300px;
margin: 0 auto;
}
div{
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>

<body>
<div>1</div>
<div class="active">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>

关于层次选择器，为了方便我们的陈述，创建了上面的文档，运行结果如下：

1、后代选择器

修改文档中的CSS样式，在末尾添加如下内容：

div div{
background-color: orange;
}

重新运行页面

但凡一个div的上层还是div元素的都被变成了橘红色

2、子选择器

在CSS样式中添加

body > div{
background-color: green;
}

运行结果

我们看到只有与body元素有直接关系（父子关系）的元素才会被变成绿色，这也是子选择器与后代选择器的区别

3、相邻兄弟选择器

在css中兄弟关系是指两个同级别，拥有同一个父元素的两个或两个以上元素的关系，例如文档中的div1、2、3、4、7，而相邻关系是指div2在div1之后

如果我们仅仅想把div2相邻的div改变颜色，需要用到相邻兄弟选择器

.active + div{
background-color: lime;
}

运行结果如下：

可以看出，颜色改变仅仅是在div2之后的div3，没有包含div2之前的div1

4、通用兄弟选择器

相邻兄弟选择器可以把元素之后的一个兄弟元素选择上，而通用兄弟选择器可以把元素之后的所有兄弟元素都选择上

.active ~ div{
background-color: red;
}

运行结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航