010_CSS后代选择器

最新推荐文章于 2023-03-06 14:29:46 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-03-06 14:29:46 发布

阅读量378

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109063095

版权

css学习专栏收录该内容

52 篇文章

订阅专栏

本文详细介绍了CSS中的后代选择器，也称为包含选择器，它允许根据元素的上下文关系定义样式。通过使用后代选择器，可以更精确地控制列表中特定元素的样式，如将列表内的``元素设置为斜体。后代选择器的特点是元素间的层次间隔可以无限，如`ulem`选择器会选择所有嵌套在`<ul>`下的``元素。文章通过代码示例和效果图清晰展示了后代选择器的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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. 请注意标记为的蓝色代码的上下文关系:

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

<ol>

<li>我是斜体字。这是因为 strong 元素位于 li 元素内。</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. 效果图