HTML-4-CSS选择器与权重

最新推荐文章于 2021-06-03 02:10:28 发布

只爱故事不爱酒的秃头少女

最新推荐文章于 2021-06-03 02:10:28 发布

阅读量107

点赞数

分类专栏： HTML CSS 文章标签： html css

本文链接：https://blog.csdn.net/Liuhxhhhhh/article/details/106693903

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test4</title>
	<link rel="stylesheet" type="text/css" href="test4.css">
</head>
<body>
	<!-- <div>
		<span>123</span>
	</div>
	<span>456</span>
	<div class="wrapper">
		<strong class="box">
			<em>789</em>
		</strong>
	</div>
   <div>
   	    <em>1</em>
   	    <strong>
   	    	<em>2</em>
   	    </strong>
   	
   </div>

   <section>
           <div>
           	   <p>
           	   	   <a href="">
           	   	   <span></span>
           	   	   </a>
           	   </p>
           	   <ul>
           	   	  <li>
           	   	  	  <a href="">
           	   	  	  	<span>
           	   	  	  		<em>1</em>
           	   	  	  	</span>
           	   	  	  </a>
           	   	  	  <p></p>
           	   	  </li>
           	   	  <li></li>
           	   </ul>
           </div>	

           <a href="">
           	   <p>
           	   	     <em>2</em>
           	   </p>
           	   <div></div>
           </a>

   </section>

   <div>11</div>
   <div class="demo">22</div>
   <p class="demo">33</p>
  
    <div class="cla1">
    	<div class="cla2">
    		<em class="cla3" id="only">
    			1    			
    		</em>    		
    	</div>
    </div>

    
    <div class="classdiv" id="iddiv">
    	<p class="classp" id="idp">
    		hahahah    		
    	</p>    	
    </div> -->

    <em>100</em>
    <strong>200</strong>
    <span>300</span>
    <br><br>

    <div class="demo1">110</div>
    <div class="demo2">220</div>

</body>
</html>

div span{
	background-color: red;
}
/*父子选择器或者叫派生选择器*/
/*父子选择器的每一个层级不一定是标签*/
.wrapper .box em{
	background-color: green;
}



div strong em{
	background-color: purple;

}


/*直接子元素选择器*/
div > em{
	background-color: yellow;
}



section div ul li a em{
	background-color: red;
}   /*当有很多个标签时，浏览器会从右往左的选择运行，时间会更快*/



/*并列选择器*/
/*多个限制条件控制一个元素，中间不加空格*/
/*如果存在标签选择器，则标签选择器必须在前面*/
div.demo{
	background-color: red;
}

em.cla3{
	background-color: pink;
}


#iddiv p{
	background-color: red;
}
/*只要写在同一行的选择器，将其权重相加*/
.classdiv .classp{
    background-color: green!important;
}

/*权重相同时,后面的代码会覆盖前面的代码*/


/*分组选择器*/
/*多个标签共用同一个代码块*/
em,strong,span{
	background-color: red;
}

.demo1,
.demo2{
	width: 100px;
	height: 100px
}
.demo1{
	background-color:red;
}
.demo2{
	background-color: green;
}

只爱故事不爱酒的秃头少女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-4-CSS选择器与权重

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>test4</title> <link rel="stylesheet" type="text/css" href="test4.css"></head><body> <!-- <div> <span>123</span>.
复制链接

扫一扫