css中关于选择器的使用总结

2020-11-27 来源：我们爱旅游

标签、通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>标签选择器</title>
 <style type="text/css">
 <!--
 body:标签选择器
 *：通配符选择器
 .：类选择器
 ，：并集选择器
 
 CSS属性：
 Text-align Center,left,right 文字居中格式 
 Font-size 18px 设置文字大小 
 Font-family 微软雅黑,宋体 设置字体 
 Font-weight Normal默认，bold粗体，100px 设置字体加粗 
 Font-style Normal默认，italic斜体 设置字体风格 
 Color 颜色 设置文字颜色 
 -->
 body{
 background:url("xia.jpg");
 }
 p{
 font-size:50px;
 color:green;
 background-color:blue;
 width:300px;
 height:200px;
 }
 *{
 font-size: 100px;
 color: red;

 }
 </style>
</head>
<body>
 <h1>111</h1>
 <p>14期威武</p>
</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 .G{
 font-size: 200px;
 color:red;
 }
 .o1{
 font-size: 200px;
 color: blue;
 }
 .o2{
 font-size: 200px;
 color: yellow;
 }
 .g1{
 font-size: 200px;
 color: green;
 }
 .l{
 font-size: 200px;
 color: pink;
 }
 .e{
 font-size: 200px;
 color: black;
 }


 </style>
</head>
<body>
 <span class="G">G</span>
 <span class="o1">o</span>
 <span class="o2">o</span>
 <span class="g1">g</span>
 <span class="l">l</span>
 <span class="e">e</span>
</body>
</html>

复合选择器：交集选择器

选择器+选择器（中间没有空格）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<style type="text/css"> 
	.box{ 
	font-size:50px; 
	} 
	p.box{ 
	color:red; 
	} 
	p#miss{ 
	width: 400px; 
	height: 300px; 
	background-color:yellow; 
	} 
	</style> 
</head> 
<body> 
 <!--其实无非是浏览器寻找标签顺序，第一个找到p.box即可；第二个找到
 .box类即可
 -->
	<p class="box">14期威武</p> 
	<p class="box">14期霸气</p> 
	<p id="miss">14期万岁</p> 
</body> 
</html>

后代选择器和子代选择器：实际上就是包含关系

后代选择器：可隔代遗传选择器+空格+选择器

子代选择器：只能寻找第一个后代选择器+>+选择器

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<style type="text/css"> 

 .box span{ 
 	 color:red; 
 } 
	</style> 
</head> 
<body> 
 <!--
 下面p标签会找到.box类，由于span是后代选择器选择对象，即使隔代也可继承，所以p标签
 下面的span标签也可继承
 --> 
	<p class="box"> 
	<p><span class="miss">14期威武</span> 
	<span>14期好人</span> 
	</p> 
	</p> 
	<p class="box"><span>14霸气</span></p> 
</body> 
</html>

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<style type="text/css"> 
	p>span{ 
	color:red; 
	font-size:40px; 
	} 
 p>span{ 
 	 color:green; 
 	 font-size:60px; 
 } 
	</style> 
</head> 
<body> 
 <!--
 此处，由于是子代选择器，所以span只能继承p；span只能继承p；
 所以第一个为绿色；第二个为红色
 -->
	<p> 
	<p><span>14期威武</span></p> 
	<span>14期霸气</span> 
	</p> 
</body> 
</html

全部栏目

css中关于选择器的使用总结