复合选择器之后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
/*元素1是父级 元素2是子级*/
元素1 元素2 { 样式声明 }
上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。
例如:
/* 选择 ul 里面所有的 li标签元素 */
ul li { 样式声明 }
- 元素1 和 元素2 中间用空格隔开
- 元素1 是父级,元素2 是子级,最终选择的是元素2
- 元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可
- 元素1 和 元素2 可以是任意基础选择器
练习:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>/* 标签 后代选择器 父子级关系 选中的是子级 */ol li {color: red;}ul li a {color: pink;}/* 类选择器 后代选择器 */.nav li a {color: blue;}</style>
</head><body><ol><li>我是ol的孩子</li><li>我是ol的孩子</li><li>我是ol的孩子</li></ol><ul class="nav"><li>我是ul的孩子</li><li>我是ul的孩子</li><li>我是ul的孩子</li><li><a href="#">我是ul的孩子</a></li><li><a href="#">我是ul的孩子</a></li><li><a href="#">我是ul的孩子</a></li></ul><ul><li>我是ul的孩子</li><li>我是ul的孩子</li><li><a href="#">我是ul的孩子</a></li></ul></body></html>
复合选择器之后代选择器相关推荐
- 基础html交代选择器,html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器 一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
- 基础选择器之通配符选择器(CSS、HTML)
基础选择器之通配符选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta c ...
- 基础选择器之id选择器(CSS、HTML)
基础选择器之id选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ch ...
- CSS基础选择器之标签选择器(CSS、HTML)
CSS基础选择器之标签选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ...
- 基础选择器之id选择器
id选择器可以为标有特定id的HTML元素指定特定样式. HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义. #id名{属性1:属性值1:.... } 例如 ...
- CSS复合选择器之链接伪类选择器及总结
在某些大型购物网站.新闻网站中可以看到许许多多的链接,其中很多链接的样式都为黑色,当鼠标放到某一链接上的时候,链接的颜色也会变化,点击过后颜色也会变化.这就用到了CSS复合选择器中的链接伪类选择器. ...
- jQuery选择器之层级选择器
文档中的所有的节点之间都是有这样或者那样的关系.我们可以把节点之间的关系可以用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了. 选择器中的层级选择器 ...
- html层次选择器例题,详解强大的jQuery选择器之基本选择器、层次选择器
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件, ...
- 复合选择器之链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素. 伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover . :first-child . 因为伪类 ...
最新文章
- PHP使用imagick扩展来合并图像
- zip压缩和unzip解压缩命令详解
- foreman源NO_PUBKEY 6F8600B9563278F6
- GPT转MBR怎么转?GPT转MBR完整图文教程
- Vue+stylus实现自定义文字的loading组件
- 柠檬工会_工会经营者
- 结合源码探讨Android距离传感器亮灭屏机制
- 图片切换,带标题文字
- 计算机应用基础论坛发帖,计算机应用基础串讲冲刺讲义(一)_IT教育论坛_计算机学习论坛_学赛网_IT在线教育平台...
- 射频电路学习之Smith圆图
- html 图片触碰有放大效果,CSS3 鼠标滑过图片突出放大效果
- MATLAB —— polyfit()多项式曲线拟合(线性拟合/线性回归)
- mybatis plus(包米豆)json存储Mysql数据库
- 本地电脑安装虚拟机-解决USB驱动报错(代码 39)问题
- 海尔计算机无法装win7系统,海尔Haier电脑预装win8换win7系统BIOS设置及安装教程
- raster包—resample函数
- 提高元认知能力时刻掌握方向舵主动控制生命航向
- 无人车“看世界”的底层逻辑——概率密度与贝叶斯法则
- CSDN写文章MarkDown用到的表情包收集(转自Github)
- 动力电池产业剧变中,宁德时代拿什么保住“一哥”地位?
热门文章
- 从爆款单品到全屋智能 Aqara如何引领行业变革
- 广告文案写作四个基本要求
- 搭建个人网盘-owncloud
- 《计算广告》第三部分计算广告关键技术——笔记(中上)
- Java学习之路:简单的飞机大战游戏(敌机下落篇)
- java 进程 线程数量_如何查询一个进程下面的线程数(进程和线程区别)
- 狂野飙车显示无法连接服务器,狂野飙车8:极速凌云无法连接服务器是什么原因...
- ⑤⭐全网首发☀️数据有道之数据库技术❤️干货大全【持续更新】❗❗❗
- 《SolidWorks 2014中文版机械设计从入门到精通》——1.9 范例
- 关于Likelihood 和 Probability的差别