CSS学习笔记（二）——CSS选择器

浅浅的花香味﹌ 2023-08-17 17:04 51阅读 0赞

### css选择器 ###

#### 1.标签选择器 ####

标签选择器使用\*来设计，对整体进行样式，影响范围大，尽量应用在层级选择器中。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>标签选择器</title>
    	<style type="text/css">
    		*{
    			font-size: 30px;
    		}
    	</style>
    </head>
    <body>
    	<ul class="menu">
    		<li><a href="#">首页简介</a></li>
    		<li><a href="#">首页简介</a></li>
    		<li><a href="#">首页简介</a></li>		
    	</ul>
    </body>
    </html>

网页效果：  
![在这里插入图片描述][20190930095631525.png]

#### 2. id选择器 ####

通过id名来选择元素，元素id名称不能重复，所以只能对应于一个元素。id一般给程序使用，所以不推荐使用id作为选择器。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>id选择器</title>
    	<style type="text/css">
    		#div1{
    			font-size: 30px;
    			color: #000;
    		}
    		#div2{
    			font-size: 50px;
    			color: #0f0;
    		}
    	</style>
    </head>
    <body>
    	<div id="div1" >你好，html</div>
    	<div id="div2" >你好，css</div>
    </body>
    </html>

网页效果：  
![在这里插入图片描述][20190930100200905.png]

#### 3.类选择器 ####

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>类选择器</title>
    	<style type="text/css">
    		.div1{			
    			font-size: 40px;
    			color: #00f;
    		}
    		.div2{
    			font-size: 40px;
    			color: #0f0;
    		}
    	</style>
    </head>
    <body>
    	<div class="div1" >你好，html</div>
    	<div class="div2" >你好，css</div>
    </body>
    </html>

网页效果：  
![在这里插入图片描述][20190930100611448.png]

注意：id选择器的权重大于类选择器

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>类选择器</title>
    	<style type="text/css">
    		#div1{
    			color: #000;
    		}
    		#div2{
    			color: #000;
    		}
    		.div1{			
    			font-size: 40px;
    			color: #00f;
    		}
    		.div2{
    			font-size: 40px;
    			color: #0f0;
    		}
    	</style>
    </head>
    <body>
    	<div id="div1" class="div1" >你好，html</div>
    	<div id="div2" class="div2" >你好，css</div>
    </body>
    </html>

网页效果：  
![在这里插入图片描述][20190930100849519.png]

#### 4. 层级选择器 ####

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。层级选择器最好不要超过四层，会降低性能。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.box{
    			font-size: 20px;
    			line-height: 30px;
    			text-indent: 40px;
    		}
    		.box span{
    			color:red;
    			font-weight: bold;
    		}
    		.box em{
    			font-style: normal;
    			text-decoration: underline;
    			font-weight: bold;
    			color: pink;
    		}
    		.box .span02{
    			font-style: normal;
    			text-decoration: underline;			
    			color: blue;
    		}
    
    	</style>
    </head>
    <body>
    
    	<div class="box">
    	大家记得今天6点之前交登记表，今天中午聚餐，大家把表交到xxx那里（学院303开门左手第二个位置)大家记得今天<span>6点之前</span>交登记表，今天中午聚餐，大家把表交到xxx那里（<span class="span02">学院303</span>开门左手第二个位置)大家记得今天6点之前交登记表，今天中午我们<em>聚餐</em>
    	</div>
    
    </body>
    </html>

网页效果：  
![在这里插入图片描述][20190930101542975.png]

#### 5. 组选择器 ####

多个选择器，如果有同样的样式设置，可以使用组选择器统一设计，简化编写。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>组选择器</title>
    	<style type="text/css">
    		.box01,.box02,.box03{
    			font-size: 20px;
    			text-indent: 40px;
    		}
    		.box01{
    			color: red;
    		}
    		.box02{			
    			color: blue;
    		}
    		.box03{			
    			color: gold;
    		}
    	</style>
    </head>
    <body>
    	
    	<div class="box01">这是第一个div</div>
    	<div class="box02">这是第二个div</div>
    	<div class="box03">这是第三个div</div>
    </body>
    </html>

网页效果：  
![在这里插入图片描述][20190930101748216.png]

#### 6.伪类及伪元素选择器 ####

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。  
伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>伪类和伪元素选择器</title>
    	<style type="text/css">
    		.link{
    			font-size: 40px;
    			text-decoration: none;
    			color: red;
    		}
    		.link:hover{
    			/*伪类：当鼠标放在csdn时的效果*/
    			color: gold;
    			font-weight: bold;
    		}
    		.box01,.box02{
    			font-size: 20px;
    		}
    		.box01:before{
    			/*伪元素可以在前面或者后面插入信息*/
    			content: "文字信息：";
    			color:red;
    		}
    		.box02:after{
    			content: "文字结束";
    			color:red;
    		}
    	</style>
    </head>
    <body>
    	
    	<a href="https://www.csdn.net" class="link">csdn</a>
    	<div class="box01">这是第一个div</div>
    	<div class="box02">这是第二个div</div>
    </body>
    </html>

网页效果：  
![在这里插入图片描述][20190930102325134.png]  
当鼠标放在csdn时：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70]

[20190930095631525.png]: /images/20230808/c69a804a895148e4b76a7775474ecc49.png
[20190930100200905.png]: /images/20230808/b35c95abc29548899c920408642f6113.png
[20190930100611448.png]: /images/20230808/c6acaf2ec7784514bf65a1d4bf88ecc0.png
[20190930100849519.png]: /images/20230808/0ff488a007d040b3b77fd21da9cd88e6.png
[20190930101542975.png]: /images/20230808/e9e5eb7ed52546b8a0d5f53efc841800.png
[20190930101748216.png]: /images/20230808/e1af38992ee342f88743a3ce0df8f1a4.png
[20190930102325134.png]: /images/20230808/4a5a0dd2f7324ca792cc0a0240247f2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3MDA1OA_size_16_color_FFFFFF_t_70]: /images/20230808/f70822c12a154538bbfcc9e079909d3f.png