您的位置: 首页  >  文章  >  CSS 选择器 权重值计算

CSS 选择器 权重值计算

分类: 文章 • 2024-01-11 14:59:52

Barking dogs seldom bite. 吠犬不咬人

吠犬不咬人;爱叫的狗很少咬人;善吠的狗很少咬人;
今天给大家分享一个选择器的一些知识

！important >1000
内联样式 =1000
id选择器 =100
类，伪类 =10
元素选择器 =1
* 选择器 =0
继承的样式 无

规则：
1.权值一样，就近原则，遇到上面那个第2个问题的话，就是群组选择器，各算个的。

2.当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加，然后进行比较，权值大的优先显示。

        注意：
         1.选择器的权值计算不会超过其最大数量级，一万个 #ID 都不会超过1000，因为id是100，最大不能超过百位数，就是不能达到1000<br/>
         2.群组选择器的权值单独计算，不会相加。<br/>
		 3.样式后面加上 ！important 该样式会获取最高优先级
		   内联样式不能添加！important<br/>
		 4.权重值相等的时候就使用就近原则<br/>

这个网页绿的发紫哈！
CSS 选择器 权重值计算
下面是代码，可以在浏览器浏览，嗯对！

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="李凯">
  <meta name="Keywords" content="选择器 权重值 ！important">
  <meta name="Description" content="">
  <title>关于选择器的权值！</title>
 </head>
 <style>
 body{background-color:#3eff3e;}
 p   {margin:50px auto;
      text-align:center;
	  font-size:25px;
	  letter-spacing:1.5px;
      
 
     }
 .article1{
           margin: 50px auto;
		   padding:15px;
		   width:1200px;
		   background-color:#afa;
		   font-size:30px;
		   font-family:"楷书";
		   font-weight:bold;
		   text-indent:2em;
		   /*border:2px double #ffa;*/
		   transition:.5s;
		   border-radius:50px;
		   cursor:pointer;/* 鼠标放上去显示小手*/
 } 
 div:hover{background-color:#3eff3e;          
          }

 .fontred{
 color:red;
 
 }
 </style>
 <body>
  <p>Please move your mouse on this DIV~,thank you!</p>
 <div class="article1">
     <!-- 思考p的大小应该是多少？
	  <pre> 
	  ...
	  ...
    &ltdiv&gt  
	      &lt p&gt
		    &lt span&gt
                演示文稿
			&lt /span&gt
	            演示文稿
	  
	      &lt /p&gt
		  &lt p&gt 演示文稿&lt/p&gt
    &lt/div&gt 
	...
	</pre>
    1.假如说一个div里面有其他的子元素 &lt p &gt ,&lt span &gt ,&lt img &gt,等，然后比如这个子元素里面的<span class="fontred">第二个</span>p 元素，是一段话，然后这个div为内部所有的 p 设置了一个属性大小，比如是20px，然后他的内联属性也设置了大小 25px 然后链接了一个外部的css样式表，样式表里面的属性大小是30px，然后思考大小究竟多大？<br/>-->
	<pre> 
	  ...
	  ...
    &lt div&gt  
	     &lt div&gt
		    &lt p id="demo"&gt
                演示文稿
	  
	      &lt span&gt
		      演示文稿
		  &lt /span&gt 
		    演示文稿
		&lt/p&gt
	 &lt /div&gt
    &lt/div&gt 
	...
	</pre>
    2.或者说<br/>div div #demo span{color:red;}<br/>div .p span{color:blue;}<br/> 这个span元素是什么颜色？只前学的那个就近原则，那么你认为span是不是就是蓝色？那么！important呢？
	   
	  
	3.权值：计算权值
	   规则：
	         1.权值一样，就近原则，遇到上面那个第2个问题的话，就是群组选择器，各算个的。<br/>  
	         2.当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加，然后进行比较，权值大的优先显示。
	        注意：
	         1.选择器的权值计算不会超过其最大数量级，一万个 #ID 都不会超过1000，因为id是100，最大不能超过百位数，就是不能达到1000<br/>
	         2.群组选择器的权值单独计算，不会相加。<br/>
			 3.样式后面加上 ！important 该样式会获取最高优先级
			   内联样式不能添加！important<br/>
			 4.权重值相等的时候就使用就近原则<br/>
			 
			  
			 答案：颜色是red 原因就是上面的那个选择器权重值有 id，id是100，那么权重值是100+1+1+1=113，第二行的选择器权重值是10+10+1=21,113 > 21 ,那么样式应该是113的那个，应该是red。
 
 
 </div>
 </body>
</html>

相关推荐