011_CSS子元素选择器

最新推荐文章于 2021-06-25 09:54:52 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-06-25 09:54:52 发布

阅读量160

点赞数

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

本文链接：https://blog.csdn.net/aihiao/article/details/109063646

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1. 与后代选择器相比, 子元素选择器(Child selectors)只能选择作为某元素的子元素。

2. 选择子元素

2.1. 如果您不希望选择任意的后代元素, 而是希望缩小范围, 只选择某个元素的子元素, 请使用子元素选择器(Child selector)。

2.2. 例如, 如果您希望选择只作为h1元素子元素的strong元素, 可以这样写:

h1 > strong {
    color: red;
}

这个规则会把第一个h1下面的两个strong元素变为红色, 但是第二个h1中的strong不受影响:

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

2.3. 例子

2.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS子元素选择器</title>
		<meta charset="utf-8" />

		<style type="text/css">
			h1 > strong {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
		<h1>This is <em>really <strong>very</strong></em> important.</h1>
	</body>
</html>

2.3.2. 效果图

3. 语法解释

3.1. 您应该已经注意到了, 子选择器使用了大于号(子结合符)。

3.2. 选择器h1 > strong可以解释为"选择作为h1元素子元素的所有strong元素"。

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
011_CSS子元素选择器

1. 与后代选择器相比, 子元素选择器(Child selectors)只能选择作为某元素的子元素。2. 选择子元素2.1. 如果您不希望选择任意的后代元素, 而是希望缩小范围, 只选择某个元素的子元素, 请使用子元素选择器(Child selector)。2.2. 例如, 如果您希望选择只作为h1元素子元素的strong元素, 可以这样写:h1 > strong {color:red;}这个规则会把第一个h1下面的两个strong元素变为红色, 但是第二个h1中的strong不
复制链接

扫一扫

专栏目录