CSS选择器

最新推荐文章于 2024-08-04 20:38:28 发布

舒ing

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量52

点赞数

分类专栏： JSP 文章标签： css java

本文链接：https://blog.csdn.net/m0_51649818/article/details/119479746

版权

JSP 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章目录

1、标签选择器
2、类选择器
3、id选择器
4、三类选择器的优先级

选择器作用：就是选择代码中某一个或者某一类的元素，给他进行声明。

1、标签选择器

会选择这个页面上所有的这个标签的元素。
标签选择器名字一定是标签名（如div、span、h1、p等）。

<style type="text/css">
	div{
		/* 将块级元素转换成行内元素 */
		display: inline;
		/* 块级
		元素独占一行 */
		width: 200px;
		height: 200px;
		background-color: red;
		margin-top: 2px;
	}
	span{
		/* 将行内元素装换成块级元素 */
		display: block;
		width: 200px;
		height: 200px;
		background-color: green;
		margin: 2px;
	}
</style>

2、类选择器

类选择器是自己定义的一个声明。
类选择器一定是 .类名 的形式。
类选择器在使用时，要在使用标签后面加一个class ，class可以等于任何类，可以通过空格实现多个类选择器的叠加效果。

<style type="text/css">
	.bg-blue{
	font-size: 20px;
	color: blue;
	}
</style>

3、id选择器

id不能同样，只能属性唯一。 也就是说，这个页面里面的id的值只能存在一个，不能存在多个。
id选择器以#开头，自己定义名称。
id选择器使用时在标签后加id，id选择器不能叠加使用。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#size{
				font-size: 50px;
			}
			#color{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 id="color">标题1</h1>
		<h1 id="size">标题2</h1>
	</body>
</html>

4、三类选择器的优先级

id选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#size{
				font-size: 50px;
			}
			#color{
				color: red;
			}
			.bg-blue{
				color: blue;
			}
			h1{
				color: green;
			}
		</style>
	</head>
	<body>
		<h1 id="color" class="bg-blue">标题1</h1>
		<h1 class="bg-blue">标题2</h1>
		<h1>标题3</h1>
	</body>
</html>