CSS 选择器(二):子代选择器(>)
2022-05-30 13:28
3051 查看
HTML 的结构是树形结构,A 节点有两个节点 B 和 C,B 和 C 的父节点是 A 节点;B 节点有 D 节点,D节点是 B 节点的子节点,而 D 节点的祖先节点就是 A 节点。
B、C、D 这三个节点都是 A 节点的后代节点。子代选择器针对于某节点的直接子节点(第一代子节点),而不是后代节点,其样式只对该节点的第一代直接子节点有效:
<div id="app"> <div>items-1 <div>item-1-1</div> <div>item-1-2 <div>items-1-2-1</div> <div>items-1-2-2</div> </div> </div> <div>items-2</div> </div>
(1)后代选择器:
#app div { border: 4px solid #00B7FF; }
(2)子代选择器:
#app > div { border: 4px solid #00B7FF; }
以上两种选择器的区别显而易见,子代选择器的样式只针对于
div#app下的第一代子节点有效(直接子节点);后代选择器,顾名思义,凡是
div#app的后代节点,包括直接子节点都运用该样式。
<div>是一个块级元素,虽然在 HTML 中层次分明,但是浏览器中呈现的效果是同级。上图中块级元素能够展示出层级效果是因为子代选择器:
div > div { margin-left: 20px; }
相关文章推荐
- HTML/CSS: 浅谈<a>标签及伪类选择器
- CSS相邻选择器(>)选择子元素而不包含该子元素的子元素,及如何让DIV中的内容垂直居中
- css基本选择器,id选择器,class选择器,标签选择器,*通配符选择器,逗号 空格 + >
- CSS中包含(后代)选择器和子代选择器的区别
- <学习CSS>第二天笔记-选择器(标签选择器、类选择器、css命名规范、谷歌案例、多类名选择器、id选择器、通配符选择器、伪类选择器)
- 解决<fx:Style>样式设置中报错 必须使用命名空间限定 CSS 选择器“Alert”中的类型“Alert”
- 子代选择器(>)后代选择器(' ')的区别
- 理解CSS中的三种选择器>+~
- CSS后代选择器和子代选择器区别
- 腾讯前端十天小白训练营<DAY 3>---css引入方式、选择器&权重
- css 伪类选择器
- 认识一波CSS高级选择器
- css:after 和:before选择器 --笔记
- CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
- CSS之旅——第二站 如何更深入的理解各种选择器
- CSS中几个初涉元素<position><float>
- CSS 选择器
- CSS手册简编:选择器的使用方法
- css 选择器
- CSS 复合选择器 web前端 CSS 基础 选择器