CSS选择器

最新推荐文章于 2025-05-30 15:39:29 发布

又考试的laymmy

最新推荐文章于 2025-05-30 15:39:29 发布

阅读量193

点赞数

分类专栏：前端文章标签： HTML 前端选择器

本文链接：https://blog.youkuaiyun.com/weixin_35083228/article/details/80719622

版权

前端专栏收录该内容

3 篇文章

订阅专栏

CSS选择器用于给特定的元素设置特定的样式，比如要给某一段落设置字体样式为黑体，20字号，就可以用选择器实现。

选择器主要分为ID选择器，类选择器，元素选择器，通配符选择器等。

元素选择器：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<titl>标签选择器</title>
	<style type="text/css">
		p[id="name"]{
			font-size: 40px;
			color: white;
			width: 880px;
			height: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<p id="name">hello，你好</p>
	<p>www.baidu.com</p>
	
</body>
</html>

ID选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<titl>标签选择器</title>
	<style type="text/css">
		#name{
			font-size: 40px;
			color: white;
			width: 880px;
			height: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<p id="name">hello，你好</p>
	<p>www.baidu.com</p>	
</body>
</html>

类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<titl>标签选择器</title>
	<style type="text/css">
		.name{
			font-size: 40px;
			color: white;
			width: 880px;
			height: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<p class="name">hello，你好</p>
	<p>www.baidu.com</p>	
</body>
</html>

通配符选择器：所有标签都设置成需要的样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<titl>标签选择器</title>
	<style type="text/css">
		*{
			font-size: 40px;
			color: white;
			width: 880px;
			height: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<strong>welcome to here</strong>
	<p>hello，你好</p>
	<p>www.baidu.com</p>	
</body>
</html>