CSS中的选择器问题一文便知

最新推荐文章于 2022-09-26 12:11:37 发布

赵广陆

最新推荐文章于 2022-09-26 12:11:37 发布

阅读量649

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/ZGL_cyy/article/details/105632256

版权

front 专栏收录该内容

45 篇文章 6 订阅

订阅专栏

4.39 +兄弟选择器只会改变下面相邻的元素对象

4.4 ~兄弟选择器后面所有的兄弟对象都会改变

4.5 伪类选择器

1 介绍

什么是选择器：如果要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

2 常用三种选择器

2.1 标签选择器

color: red;

}

2.2 id选择器

id:(唯一性)

id命名：数字、字母、下划线、中划线（-），不能用数字开头

#p_1{

font-size: 30px;

color: yellowgreen;

}

2.3 class选择器

.p_2{

font-weight: bold;

color: yellow;}

2.4 *通配符选择器

3 常用选择器的优先级：

id 选择器>class 选择器>标签选择器

测试代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			/*通用选择器  *代表该页面中的所有的元素 */
			/**{
				color: red;
				
				background-color: black;
			}*/
			/*元素选择器*/-->
			div{
				
				width: 200px;
				
				height: 200px;
				/*背景颜色*/
				background-color: blue;
				
				/*边框的粗细   边框的风格  边框的颜色 */
				border: 1px solid red;
			
			}
			/*ID选择器 #id的名称 id的名称保证唯一
			 
			 * ID的命名： 数字、字母、下划线、中划线组成，不能用数字开头
			 * */
			#div1{
				
				background-color: green;
				
			}
			
			/*class类选择器*/
			
			.div_1{
				
				background-color: pink;
				
			}
			
		</style>
		
	</head>
	<body>
		
		
		<!--<div class="div_1">1</div>-->
		
		<div>2</div>
		
		<!--<div class="div_1">3</div>-->
		
		
		<p>你好</p>
	</body>
</html>

效果：

最后总结一下，十大选择器与伪元素的权重情况：

选择器	表达式或示例	说明	权重
ID选择器	#aaa		100
类选择器	.aaa		10
标签选择器	h1	元素的tagName	1
属性选择器	[title]		10
相邻选择器	selecter + selecter	拆分为两个选择器再计算
兄长选择器	selecter ~ selecter	拆分为两个选择器再计算
亲子选择器	selecter > selecter	拆分为两个选择器再计算
后代选择器	selecter selecter	拆分为两个选择器再计算
通配符选择器	*		0
各种伪类选择器	如:link， :visited， :hover， :active， :target， :root， :not等		10
各种伪元素	如::first-letter,::first-line,::after,::before,::selection		1

4 CSS 中其他选择器

4.1 后代选择器

只要包含该标签对象即可

div span{

font-size: 27px;

font-family: 宋体;

color: red;

}

4.2 子选择器直系子标签

div>span{

color: red;

}

4.39 +兄弟选择器只会改变下面相邻的元素对象

#p_1+p{

color: green;

}

4.4 ~兄弟选择器后面所有的兄弟对象都会改变

#p_1~p{

color: red;font-size: 30px;

}

4.5 伪类选择器

a:hover{

color: red;

}

测试代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*后代选择器   只要包含该标签对象即可  */
			/*div span{
				
				font-size: 27px;
				
				font-family: 宋体;
				
				color: red;
			}*/
			
			/*子选择器 直系子标签*/
			
		   /* div>span{
			
			color: red;
		   }
		   */
		  /*兄弟选择器  只会改变下面相邻的元素对象*/
		  
		  /*#p_1+p{
		  	
		  	color: green;
		  	
		  }*/
		 
		 /*兄弟选择器  后面所有的兄弟对象都会改变*/
		 #p_1~p{
		 	
		 	color: red;
		 	
		 	font-size: 30px;
		 	
		 
		}
		/*伪类选择器*/
		 
			a:hover{
				
				color: red;
				
			}
	     		
			
		</style>
		
	</head>
	<body>
		
		
		<div>
			
			<span>csdn</span>
			
			<p>
				
				<span>csdn123</span>
				
			</p>
			
		</div>
		
		<span>csdn</span>
		
		<hr />
		
		<p id="p_1">我们不一样</p>
		
		
		<p>我们不一样</p>
		
		
		<p>我们不一样</p>
		
		<hr />
		
		<a href="">京东网址</a>
	</body>
</html>

效果：