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

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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: