HTML5第四天学习内容(CSS选择器种类)_html选择器当日课程主要内容-CSDN博客

本文链接：https://blog.csdn.net/luoluoyan123/article/details/81043483

CSS选择器种类: 基本选择器层次选择器伪类选择器选择器的优先级

一、基本选择器：

1️⃣：通配符选择器。(选择页面所有的元素)

*{
margin: 0;
padding: 0;

}

2️⃣：标签（元素）选择器:查找的是页面中所有该种类型的标签。

p {
color:yellow;
font-size: 40px;
background-color: pink;

}

3️⃣：类（class）选择器。

.oneDiv {
font-size: 50px;

}

.selfH1{
text-indent: 2em;

}

4️⃣：id 选择器。

#twoDiv {

background-color:lightpink ;
line-height: 50px;

}

5️⃣：群组选择器。

p.oneDiv,#twoDiv,div{

text-indent: 2em;

}

附件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>基本选择器</title>
		<style type="text/css">
			/*1,通配符选择器(选择页面所有的元素)*/
			*{
				margin: 0;
				padding: 0;
			}
			/**
			 *  2，标签（元素）选择器:查找的是页面中所有 该种类型的 标签
			  */
			 p {
			 	color:yellow;
			 	font-size: 40px;
			 	background-color: pink;
			 }
			 /**
			  * 3，类（class）选择器 
			  */
			 .oneDiv {
                   font-size: 50px;			 	
			 }
			 .selfH1{
			 	text-indent: 2em;
			 }
			 /*
			  * 4, id 选择器*/
			 #twoDiv {
			 	background-color:lightpink ;
			 	line-height: 50px;
			 }
			 /*
			  
			  * 5,群组选择器
			  * */
			 p.oneDiv,#twoDiv,div{
			 	text-indent: 2em;
			 	
			 }
		</style>
	</head>
	<body>
		<p>早上吃饭没？</p>
		<div class="oneDiv">
			说一个，咱们走一个.....
		</div>
		<p>没有实力的愤怒毫无意义！</p>
		<!--元素(标签)可以拥有多个Class值（不限次数），多个 class 值之间用空格隔开-->
		<h1 class="oneDiv selfH1">大标题</h1>
		<div>只是个简单的div</div>
		<div id="twoDiv">
			王侯将相宁有种乎.....
		</div>
			
		
	</body>
</html>

二、层次选择器：

1️⃣：后代选择器。

.oneDiv p{
font-size: 80px;
color: red;

}

2️⃣：父子选择器。(在儿子之后找)

.oneDiv>.p{
background-color: pink;

}

3️⃣：相邻兄弟选择器。(只往下边找)

.oneDiv+p{
background-color: gold;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02层次选择器</title>
		<style type="text/css">
			/*
			 1,后代选择器*/
			.oneDiv p{ 
				font-size: 80px;
				color: red;
			}
			/*
			 2,父子选择器(在儿子之后找)*/
			.oneDiv>.p{
				background-color: pink;
			}
			/*
			 3.相邻兄弟选择器(只往下边找)*/
			.oneDiv+p{
				background-color: gold;
			}
			
		</style>
	</head>
	<body>
		<div class="oneDiv">
			<p class="p">我是第一个 p</p>
			<p>我是第二个 p</p>
			<div>
				<p>第三个 p</p>
			</div>
		</div>
		<p>外边的第一个 p</p>
		<p>外边的第二个 p</p>
	</body>
	
</html>

三、伪类选择器：是系统为我们创建好的类用来为标签的某个时机设置对应的样式
link ,visited,hover,active四个伪类选择器(四个状态)
如果这个 4个伪类同时写的话,要注意先爱(love)后恨原则:
1️⃣：link 元素没有被访问时的状态
2️⃣：visited 元素点击之后的状态
3️⃣：hover 光标移动到元素时的状态
4️⃣：active 鼠标按下没有抬起时的状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>03伪类选择器</title>
		<style type="text/css">
			a:link{
				color: black;
			}
			a:visited{
				color: yellow;
			}
			a:hover{
				color: deeppink;
			}
			a:active{
				color: green;
			}
		</style>
	</head>
	<body>
		<!--
			伪类选择器:是系统为我们创建好的类.用来为标签的某个时机 设置对应的样式
			link ,visited,hover,active四个伪类选择器(四个状态)
			     如果这个 4个伪类同时写的话,要注意先爱(love)后恨原则:
			     1,link 元素没有被访问时的状态
			     2,visited 元素点击之后的状态
			     3,hover 光标移动到元素时的状态
			     4,active 鼠标按下 没有 抬起时的状态     
		-->
		<a href="http://www.baidu.com">百度一下,你就知道</a>
	</body>
</html>

四、选择器优先级：

选择的优先级
注意: 只有对相同元素设置相同样式时,我们才去讨论选择器的优先级问题
优先级顺序(从强到弱顺序):
1️⃣： !important
2️⃣：行间样式(内联样式)
3️⃣： id选择器
4️⃣： class选择器,伪类选择器,属性选择器
5️⃣：元素选择器,伪元素选择器
6️⃣： *(通配符)选择器
7️⃣：元素的默认样式
当元素优先级相同时,后来居上(后面的代码覆盖前面的代码)

对于层次选择器:这里有个值可以帮助我们迅速判定那个层次选择器的有限极高
!important 100000
行间样式 10000
id选择器 1000
class选择器 100
标签选择器 10
对于群组选择器,各个单一选择器单独判定,互不影响

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>04选择器的优先级</title>
	</head>
	<body>
		  <!--
		  	选择的优先级
		  	注意: 只有对相同元素设置相同样式时,我们才去讨论选择器的优先级问题
		  	优先级顺序(从强到弱顺序):
		  	1,!important
		  	2,行间样式(内联样式)
		  	3,id选择器
		  	4,class选择器,伪类选择器,属性选择器
		  	5,元素选择器,伪元素选择器
		  	6,*(通配符)选择器
		  	7,元素的默认样式
		  	当元素优先级相同时,后来居上(后面的代码覆盖前面的代码)
		  	
		  	对于层次选择器:这里有个值可以帮助我们迅速判定那个层次选择器的有限极高
		  	!important       100000
		  	行间样式          10000
		  	id选择器          1000
		  	class选择器       100
		  	标签选择器         10
		  	对于群组选择器,各个单一选择器单独判定,互不影响
		  	
		  -->
		  
		  
		  
		  <div class="oneDiv" id="selfDiv">
		  	随便吧
		  </div>
		
	</body>

补充: 伪类 / 伪元素 / 结构伪类 / 属性 / 复合 / 选择器伪类选择器拓展

伪类选择器 :

1️⃣ focus 选择器 : 为了获得焦点的input 设置样式

例 : input:focus {

height: 50px;

background-color: green;

}

2️⃣ disabled 选择器 : 不能被选中的 input 设置样式

例 : input : disabled {

background: raba(0, 0, 0, 0.2);

}

3️⃣ target 目标伪类选择器 : 只有跳转到该元素上时,样式才生效