CSS-常用的选择器

最新推荐文章于 2024-04-21 19:12:00 发布

paku-san

最新推荐文章于 2024-04-21 19:12:00 发布

阅读量1.3k

点赞数 4

分类专栏：前端文章标签： css 选择器伪类选择器 html 前端

本文链接：https://blog.csdn.net/qq_35302939/article/details/90339313

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

六种常用的选择器

准备工作
1、id选择器
2、class选择器(类选择器)
3、标签选择器
4、通配符
5、分组选择器
6、后代选择器
7、伪类选择器

准备工作

使用div标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
	</head>
	<body>
		<div>
			选择器
		</div>
		
	</body>
</html>

1、id选择器

id选择器，在div标签中设置一个id属性，在style标签中以以#开始后面跟div标签的id属性。
这里就像给标签一个身份证号，然后在style标签中通过这个身份证号找到对应的标签，声明该标签的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
	</head>
	<style>
		#id_div{
			color: red ;
		}
	</style>
	<body>
		<div id="id_div">
			id选择器
		</div>	
	</body>
</html>

结果
id选择器

这里文字的颜色已经改变了，这里就是通过id选择器改变具有该id名的标签
注意：这里的id选择器指定标签的id属性不能重复。

2、class选择器(类选择器)

类选择器给标签指定一个class属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
	<style>
		#id_div{
			color: red ;
		}
		.class_div{
			font-size: 36px;
		}
	</style>
	</head>
	<body>
		<div id="id_div">
			id选择器
		</div>
		<div class="class_div">
			class选择器(类选择器)
		</div>
	</body>
</html>

结果

注意：虽然id选择器指定的id属性名必须不同，但是这里类选择器指定的属性，可以给多个标签指定相同的class属性，然后通过类选择器把相同的class属性的标签选择出来。
比如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>	
	<style>
		#id_div{
			color: red ;
		}
		.class_div{
			font-size: 36px;
		}
	</style>
	</head>
	<body>
		<div id="id_div">
			id选择器
		</div>
		<div class="class_div">
			class选择器(类选择器)
		</div>
		<div class="class_div">
			第二个类选择器
		</div>
	</body>
</html>

结果：

这里可以看出给两个具有相同class属性的标签声明了相同的样式。

3、标签选择器

标签选择器，指定相同的标签声明同样的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style>
			span{
				color: red;
				font-size: 32px;
			}
		</style>
	</head>
	<body>
		<span>标签选择器</span>
		<span>||标签选择器</span>
	</body>
</html>

结果
标签选择器

4、通配符

可以通配符可以匹配任意的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				color: red;
				font-size: 36px;
			}
			
		</style>
	</head>
	<body>
		<span>通配符选择器</span>
		<div>通配符选择器</div>
		<a href="#">通配符选择器</a>
	</body>
</html>

结果

5、分组选择器

可把多个标签或者id选择器或者类选择器等分为一组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div,a,#id_b{
				color: red;
				font-size: 36px;
			}
		</style>
	</head>
	<body>
		<div>分组选择器</div>
		<span>分组选择器</span>
		<p>分组选择器</p>
		<a>分组选择器</a>
		<p >分组选择器</p>
		<b id="id_b">分组选择器</b>
	</body>
</html>

分组选择器

注意：分组选择器只是把声明样式的选择器写在一起，它和分开写没有区别，只是提高了代码复用率。

6、后代选择器

后代选择器的写法

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
declaration1;
declaration2;
…
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html body a{
				color: red;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

7、伪类选择器

伪类选择器有很多属性，这里说4个常用的属性

:link， :visited， :hover，:active
若:link、:visited、:hover和:active一起使用，:hover 必须被置于 :link 和 :visited 之后，:active 必须>被置于 :hover 之后，即:link -> :visited -> :hover -> :active ，简记love hate(爱恨)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				color: black;
				font-size: 24px;
				text-decoration: none;
			}
			a:link{
				color: green;
			}
			a:visited{
				font-size: 72px;
				color: yellow;
			}
			a:hover{
				font-size: 36px;
				text-decoration: underline;
				color:red;
			}
			a:active{
				font-size: 72px;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

未进行操作
在这里插入图片描述

鼠标放在a标签上面
在这里插入图片描述
点击链接但是不释放

访问过的网站

paku-san

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS-常用的选择器

六种常用的选择器准备工作1、id选择器2、class选择器(类选择器)3、标签选择器4、通配符5、分组选择器6、后代选择器7、伪类选择器准备工作使用div标签<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>选择器</title> &l...
复制链接

扫一扫