本文摘自PHP中文网,作者青灯夜游,侵删。
css后代选择器有:1、“父代元素 * {}”,从父代元素中的找到所有子代元素。2、“父代 子代{}”,是从父代 元素中找到指定子代元素;3、“父代 子代1 子代2{}”,从父代中找到子代1,再从子代1找到子代2。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
后代选择器集中形式:
1、父代 * {}
从 父代 中的找到 所有子代。
2、父代 子代1{}
是从 父代 中找到 子代1 或者 父代 子代2{}
是从 父代 中找到 子代2 。
3、父代 子代1 子代2{}
这个是从 父代 中找到子代1,再从 子代1 找到 子代2。
第一种形式:虽然是全部选中但是*的优先级较低。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title ></ title >
< style >
div{
padding: 20px;
background: rgba(255,0,0,0.2); //这是给它一个红色,透明度为0.2
}
.a *{
border: 2px solid black; //这里是选中类a的所有后代
}
</ style >
</ head >
< body >
< div class = "a" >a
< div class = "b" >b
< div class = "c" >c</ div >
</ div >
</ div >
</ body >
</ html >
|
第二种形式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title ></ title >
< style >
div{
padding: 20px;
background: rgba(255,0,0,0.2);
}
.a .b{
border: 2px solid black; //同理这里选择 .c 也是可以的因为他们都是 .a 的后代。
}
</ style >
</ head >
< body >
< div class = "a" >a
< div class = "b" >b
< div class = "c" >c</ div >
</ div >
</ div >
</ body >
</ html >
|
阅读剩余部分
相关阅读 >>
css怎么消除块元素
@charset规则怎么用
css定位图片位置不变的实现方法
css常见样式
css怎么用三种方法设置透明度
css实现文本溢出时显示省略号
css中id和class选择器怎么使用
详解三种css3模糊背景效果(代码实例)
html5实践-使用css装饰图片画廊的代码分享(一)
css怎么禁止选中文字
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css后代选择器有哪些