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

飞熊 • 2023年3月5日上午10:29 • Python • 阅读 67

2022-10-07：更新了内容

一、标签选择器

直接通过标签名选择

<!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>