CSS——＞CSS选择器

最新推荐文章于 2022-07-12 17:36:21 发布

省级干饭王

最新推荐文章于 2022-07-12 17:36:21 发布

阅读量72

点赞数

分类专栏： css 笔记

本文链接：https://blog.csdn.net/qq_55016379/article/details/116667261

版权

笔记同时被 2 个专栏收录

94 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

CSS选择器

元素中的id和class

id和class是元素的两个最基本属性，id和class都可以选择来实现CSS操作或JavaScript操作

id属性

id属性具有唯一性，也就是说，一个网页相同名字的id只能出现一次。

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--id属性-->
		<div id="content">存在即合理</div>
		<p id="content">存在即合理</p>
		<hr/>
		<!--class属性-->
		<div class="content">存在即合理</div>
		<p class="content">存在即合理</p>
		<hr/>
	</body>
</html>

存在即合理

class属性

class是可以多次出现的

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{color: #FF0000;}
		</style>
	</head>
	<body>
		<div>绿叶学习网</div>
		<p>绿叶学习网</p>
		<span>绿叶学习网</span>
		<div>绿叶学习网</div>
	</body>
</html>

CSS选择器

最常用的5种选择亲：

元素选择器
id选择器
class选择器
后代选择器
群组选择器

语法格式：

选择器{属性: 取值;}

元素选择器

语法结构：

元素符号{属性: 取值;}

代码实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{color: #FF0000;}
		</style>
	</head>
	<body>
		<div>绿叶学习网</div>
		<p>绿叶学习网</p>
		<span>绿叶学习网</span>
		<div>绿叶学习网</div>
	</body>
</html>

我么可以看到元素选择器就是将一个元素进行外观改造，然后在这一文件中的所有该元素都是这种外观

id选择器

语法结构：

#id名{属性: 属性值}

属性说明：

对于id选择器，id名前必须加上前缀“#”

class选择器

语法结构：

.class名{属性: 属性值;}

属性说明：

class名前必须要加上前缀英文句号（.）

后代选择器

后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和后代其他元素

语法结构：

#父元素选择 子元素选择{属性: 属性值;}

群组选择器

语法结构：

选择器1,选择器2{属性: 属性值;}

对于群组选择器，两个选择器之间必须要用英文（，）隔开

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#lvye{color: aqua;}
			div{color: #FF0000;}
			.box{color: aquamarine;}
			.content{color: darkgoldenrod;}
			#father1 p{color: antiquewhite;}
			#father2 span{color: aquamarine;}
		</style>
	</head>
	<body>
		<div>绿叶学习网</div>
		<div id="lvye">绿叶学习网</div>
		<div>绿叶学习网</div>
		<hr/>
		<div class="box">绿叶学习网</div>
		<div class="content">绿叶学习网</div>
		<hr/>
		<p ">绿叶学习网</p>
		
	</body>
</html>

省级干饭王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——＞CSS选择器

CSS选择器元素中的id和classid和class是元素的两个最基本属性，id和class都可以选择来实现CSS操作或JavaScript操作id属性id属性具有唯一性，也就是说，一个网页相同名字的id只能出现一次。代码实例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body&g
复制链接

扫一扫