程序博客网 > 逆战一键瞬狙宏软件

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

来源：互联网发布：逆战一键瞬狙宏软件编辑：程序博客网时间：2024/06/07 12:53

<!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;}

运行结果如下：

2 0

逆战一键瞬狙宏软件

逆战一键瞬狙宏软件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子大发地产排名大发森雅汽车图片日本大发汽车大扑韩剧异世之风流大发师大发车图片大发车张大发大发电机大发面 dashu 血盆大口大口大口照样子写词语荡芳大口阴大口黑鲈大口鲶大口大口吐奶大口大口一大口芥末吃下去导致人死亡黄雀三大口叫声大全宝宝大口吐奶黄雀叫声三大口mp3 大口河海滨旅游度假区口大大古大号大号是中华加大号床 amoy大号 m多大号大号图片大号高跟鞋上大号大号箱包大号的大号杯子保温杯大号上大号疼大号泳衣大号小号