当前位置：首页 > 前端技术 > CSS >内容正文

CSS

010_CSS后代选择器

发布时间：2025/4/17 CSS 82 豆豆

生活随笔收集整理的这篇文章主要介绍了 010_CSS后代选择器小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. 后代选择器(descendant selector)又称为包含选择器。

2. 后代选择器可以选择作为某元素后代的元素。

3. 根据上下文选择元素

3.1. 通过依据元素在其位置的上下文关系来定义样式, 你可以使标记更加简洁。

3.2. 在CSS1中, 通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors), 这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中, 它们称为派生选择器(我们使用更好的叫法, 后代选择器)。

3.3. 比方说, 你希望列表中的strong元素变为斜体字, 而不是通常的粗体字, 可以这样定义一个派生选择器:

li strong {font-style: italic;font-weight: normal;}

3.4. 请注意标记为<strong>的蓝色代码的上下文关系:

<p><strong>我是粗体字, 不是斜体字, 因为我不在列表当中, 所以这个规则对我不起作用</strong></p>

<ol>

<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

<li>我是正常的字体。</li>

</ol>

3.5. 语法解释: li strong选择器可以解释为"作为li元素后代的任何strong元素"。

4. 两个元素之间的层次间隔

4.1. 有关后代选择器有一个易被忽视的方面, 即两个元素之间的层次间隔可以是无限的。

4.2. 例如, 如果写作ul em, 这个语法就会选择从ul元素继承的所有em元素, 而不论em的嵌套层次多深。

4.3. 例子

4.3.1. 代码

<!DOCTYPE html> <html><head><title>CSS后代选择器</title><meta charset="utf-8" /><style type="text/css">ul em {color: red;font-weight: bold;}</style></head><body><ul><li>List item 1<ol><li>List item 1-1</li><li>List item 1-2</li><li>List item 1-3<ol><li>List item 1-3-1</li><li>List item <em>1-3-2</em></li><li>List item 1-3-3</li></ol></li><li>List item 1-4</li></ol></li><li>List item 2</li><li>List item 3</li></ul></body> </html>

4.3.2. 效果图

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的010_CSS后代选择器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。