CSS基本选择器（标签选择器、类选择器、id选择器、属性选择器、层级选择器、组选择器）

敲代码敲到头发茂密

已于 2024-02-18 16:54:53 修改

阅读量1.4k

点赞数 2

分类专栏：前端学习之路 # CSS 文章标签： css css3 html

于 2022-01-15 21:07:56 首次发布

本文链接：https://blog.csdn.net/YZL40514131/article/details/122421733

版权

前端学习之路同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 1 订阅

订阅专栏

2022-10-07：更新了内容

在这里插入图片描述

CSS基本选择器（标签选择器、类选择器、id选择器、属性选择器、层级选择器、组选择器）

一、标签选择器
二、类选择器
三、id选择器
四、属性选择器
五、层级选择器
六、组选择器

一、标签选择器

直接通过标签名选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1{
			color:chartreuse;
			}
		</style>
	</head>
	<body>
		<h1>我是一个标题</h1>
	</body>
</html>

二、类选择器

类选择器：通过元素的class属性选择（推荐使用的方式）.class属性值；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.mycls{
				color: aqua;
			}
		</style>
		
	</head>
	<body>
		<h1 class="mycls">我是一个标题</h1>
	</body>
</html>

一个元素可以设置多个属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.fontB{
				font-weight: bold;
				
			}
			.red{
				color: tomato;
			}
			.f18{
				font-size: 38px;
			}
		</style>
		
	</head>
	<body>
		<span class="fontB red f18">开心</span>
		<div class="fontB">快乐</div>
	</body>
</html>

三、id选择器

#id值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#myid{
				color: honeydew;
			}
		</style>
		
	</head>
	<body>
		<h1 id="myid">我是一个标题</h1>
	</body>
</html>

四、属性选择器

通过标签+属性进行选择元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			a[name]{
				color: green;
			}
	
		</style>
	</head>
	<body>
		<a href="" name="nb">11</a>
	</body>
</html>

五、层级选择器

先选中父元素，再选中子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			.menu div p{
				color : brown;
			}
	
		</style>
	</head>
	<body>
		<p>a</p>
		<div class="menu">
			<p>b</p>
			<div>
				<p>p标签</p>
			</div>
		</div>
	</body>
</html>

六、组选择器

（使用多种选择器）选择多个元素，设置相同的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			.box,.name,.study{
				font-weight: 600;
				color: #008000;
			}
	
		</style>
	</head>
	<body>
		<div class="box">111</div>
		<div class="name">222</div>
		<div class="study">333</div>
	</body>
</html>

敲代码敲到头发茂密

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基本选择器（标签选择器、类选择器、id选择器、属性选择器、层级选择器、组选择器）

类选择器：通过元素的class属性选择（推荐使用的方式）.class属性值；（使用多种选择器）选择多个元素，设置相同的样式。通过标签+属性进行选择元素。先选中父元素，再选中子元素。一个元素可以设置多个属性。
复制链接

扫一扫