2020.8.27

最新推荐文章于 2021-10-14 10:29:27 发布

睿丷

最新推荐文章于 2021-10-14 10:29:27 发布

阅读量72

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45688619/article/details/108260825

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

选择器
元素选择器
用标签名作为选择器，选中所有相应的元素

类选择器
根据class的属性来选择元素，样式定义为：.classname { }

ID选择器
根据id名来选择元素，样式定义为：#idname{ }

属性选择器
选择器描述
[attribute] 选取带有指定属性的元素。12456
[attribute=value] 选取带有指定属性和值的元素。6
[attribute~=value] 选取属性值中包含指定词汇的元素。456
[attribute|=value] 选取带有以指定值开头的属性值的元素，该值必须是整个单词。6
[attribute^=value] 匹配属性值以指定值开头的每个元素。1256
[attribute$=value] 匹配属性值以指定值结尾的每个元素。46
[attribute*=value] 匹配属性值中包含指定值的每个元素。12456

关系选择器
选择器描述

E F 选择E元素的后代元素
F E > F 选择E元素的直接后代元素
F E + F 选择E元素的第一个弟元素
F E ~F 选择E元素的所有弟元素F

并选择器
将相同的样式放在一起，类名直接用英文逗号分隔。写法：E,F（中间用英文的逗号分隔）

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div1,#div3 {
				width: 100px;
				height: 100px;
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<div id="div1">我是div1</div>
		<div id="div2">我是div2</div>
		<div id="div3">我是div3</div>
	</body>
</html>

通配符选择器
通配符选择器可以选中页面所有的标签写法：*{}

睿丷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020.8.27

选择器元素选择器用标签名作为选择器，选中所有相应的元素类选择器根据class的属性来选择元素，样式定义为：.classname { }ID选择器根据id名来选择元素，样式定义为：#idname{ }属性选择器选择器描述[attribute] 选取带有指定属性的元素。12456[attribute=value] 选取带有指定属性和值的元素。6[attribute~=value] 选取属性值中包含指定词汇的元素。456[attribute|=value] 选取带有以指定值开头的属性值的
复制链接

扫一扫