css面试点-元素选择符与关系选择符

最新推荐文章于 2022-04-25 22:48:18 发布

wflynn

最新推荐文章于 2022-04-25 22:48:18 发布

阅读量512

点赞数 1

分类专栏： css 面试知识点

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/102530085

版权

面试知识点同时被 2 个专栏收录

169 篇文章 7 订阅

订阅专栏

css

24 篇文章 0 订阅

订阅专栏

元素选择符：

通配选择符：选定所有对象。如 *{color:#f00;}

类型选择符：以文档语言对象类型作为选择符。如 p{font-size:13px;}

ID选择符：以唯一标识符id属性等于subtitle的E对象作为选择符，如 #subtitle{font-size:20px;}
注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法。

类选择符：以class属性包含myclass的E对象作为选择符。不同于ID选择符的唯一性，类选择符可以同时定义多个，如：

.a{color:#f00;}
.b{font-weight:700;}
<div class="a b">给某个div元素定义.a和.b两个类</div>

类选择符高级用法：多类选择符

.a.b{color:#f00;}
<div class="a b">多类选择符使用方法</div>

此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符，如：.a.b{}将会被视为：.b{}

关系选择符：

包含选择符：选择所有被E元素包含的F元素。与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

<style>
	/* 包含选择符(E F) */
	ul li{color:#f00;}
	/* 子选择符(E>F) */
	ul>li{color:#f00;}
</style>
<ul class="demo">
	<li>1</li>
	<li>2
		<ul>
			<li>2.1</li>
			<li>2.2</li>
			<li>2.3</li>
		</ul>
	</li>
	<li>3</li>
</ul>

此例，如果使用 .demo li{color:#f00;} ，那么 1, 2, 2.1, 2.2, 2.3, 3 都将会变成红色；如果使用 .demo>li{color:#f00;}，那么只有 1, 2, 3 会变成红色，即只有子元素会被命中；

子选择符：选择所有作为E元素的子元素F。与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 子选择符 (E>F)选择器-CSS教程</title>
<style>
.test>li>a{color:#f00;}
</style>
</head>
<body>
<ul class="test">
	<li>
		<a href="?">列表项目1</a>
		<ul>
			<li><a href="?">项目列表1.1</a></li>
			<li><a href="?">项目列表1.2</a></li>
		</ul>
	</li>
	<li>
		<a href="?">列表项目2</a>
		<ul>
			<li><a href="?">项目列表2.1</a></li>
			<li><a href="?">项目列表2.2</a></li>
		</ul>
	</li>
	<li><a href="?">列表项目</a></li>
	<li><a href="?">列表项目</a></li>
</ul>
</body>
</html>

相邻选择符：选择紧贴在E元素之后F元素。与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 相邻选择符 (E+F)选择器-CSS教程</title>
<style>
p+p{color:#f00;}
</style>
</head>
<body>
<div class="test">
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<p>这是一个文字段落</p>
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<p>这是一个文字段落</p>
</div>
</body>
</html>

兄弟选择符：选择E元素后面的所有兄弟元素F。与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 兄弟选择符 (E~F)选择器-CSS教程</title>
<style>
p~p{color:#f00;}
</style>
</head>
<body>
<div class="test">
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<p>这是一个文字段落</p>
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<p>这是一个文字段落</p>
</div>
</body>
</html>

css面试题之css选择符之属性选择符

css面试题之css选择符之伪类选择符

css面试题之css选择符之伪对象（伪元素）选择符

wflynn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css面试点-元素选择符与关系选择符

元素选择符：通配选择符：选定所有对象。如 *{color:#f00;}类型选择符：以文档语言对象类型作为选择符。如 p{font-size:13px;}ID选择符：以唯一标识符id属性等于subtitle的E对象作为选择符，如 #subtitle{font-size:20px;}注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法。类选择符：以class属性...
复制链接

扫一扫