前端开发日记之选择器的使用

最新推荐文章于 2022-03-02 15:29:17 发布

jiang_mingyi

最新推荐文章于 2022-03-02 15:29:17 发布

阅读量273

点赞数

分类专栏：前端开发日记文章标签：前端开发 css

本文链接：https://blog.csdn.net/jiang_mingyi/article/details/51848911

版权

前端开发日记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

主要总结一下，选择器中空格的使用。

选择器中的空格一个困扰了我好久，通过查询资料和测试，现在来总结一下。

先看下面一段代码；

test.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link	rel="stylesheet" href="test.css"/>
</head>
<body>
	<div class="a b c">
		<div class="d">
			<div class="b">
				<h1 class = "c"> jmy can fly </h1>
				<a class="e" > just do it </a>
			</div>
		</div>
	</div>
</body>
</html>

test.css

.a .b .c {
	background-color:blue;
}
a.e:hover{
	color:red;
}

先看后代选择器：

.a .b .c{backgroud-color:blue} (注意有空格) 表示在.a 下找.b，然后再在.b下找.c 找到之后将.c的背景颜色设为blue。

在看组合选择器：

.a.b.c{backgroud-color:blue}(注意没有空格) 表示标签的class属性必须同时具备a b c 才能生效，即class=“a b c”，当然 class = "a b c d"也是可以生效的。

再看后代选择器：

a .e : hover{color:red}(注意有空格) 表示在a标签下找class属性有e的标签然后css才能生效，示例代码中是不能生效的。

再看组合选择器：

a.e : hover{color:red}(注意没有空格) 表示找拥有class属性为e的a标签，示例代码是能够生效的。

附：

.a,.b,.c{}中间有逗号，表示对a,b,c都生效。

jiang_mingyi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发日记之选择器的使用

主要总结一下，选择器中空格的使用。选择器中的空格一个困扰了我好久，通过查询资料和测试，现在来总结一下。先看下面一段代码；test.html jmy can fly just do it test.css.a .b .c { background-color:blue;}a.e:
复制链接

扫一扫

专栏目录