Go语言视频零基础入门到精通

admin

  
一，前言：
　　刚加的css怎么没有渲染出来？浏览器中查看，发现是被其他的css给覆盖了，相信我们都曾遇到过这样的问题。那么浏览器是如何选择css标签的渲染顺序的呢？换句话说，css选择器的优先级是怎么规定的？
  
二、正文：
　　先上一个例子

1. <div id = "outerId" class = "outerClass">
2.     <div id = "innererId" class = "innerClass">
3.           <p id = "thisId" class = "thisClass" style = "">这是一个CSS选择器的测试</p>
4. 　　　　　　<button type = "button" class = "buttonClass">按钮</button>
5.     </div>
6. </div>

复制代码

问：有多少种css选择器可以对<p>标签样式产生影响呢？
如果详细的进行分析，排列组合有太多种了，太过麻烦。我们就说说有哪几个类别：

行内样式：        即  style = "font-size: 12px"；
id选择器：  　   即  #thisId {font-size: 12px;}
class选择器：   即 .thisClass {font-size: 12px;}
元素选择器：    即  p {font-size: 12px;}

如上四种类别都可以对<p>标签的样式产生影响，那么谁先谁后，谁打谁小呢？
  
有如下两种解释：

一个selector的权重表示方式：0.0.0.0，按照计算规则给每位填充数字，对应位置相等，则比较下一位；
也有分别以1000、100、10、1四个权值系数对CSS选择器进行权重计算。


  
   
   选择器类别
   说明
   权重表示
   权值表示
   
   
   行内样式
   行内只有一个 style = ""
   （1.0.0.0）  
   1000
   
   
   id选择器
   selector中使用了几个id，即#的个数
   （0.1.0.0）  
   100
   
   
   类选择器
    类,伪类,以及属性的个数，如： .outerClass .buttonClass[type="button"]:hover{} 选择器中有2个类,1个属性,1个伪类  
   （0.0.1.0）  
   10
   
   
   元素选择器
    伪元素和标签元素的个数，如： p:first-child 选择器中有一个标签元素p和一个伪元素first-child  
   （0.0.0.1）  
   1
   
  

  
  
  
  
  
  
  
  
  
  
  
  
最后的几点说明：

  !important 表示强制应用该样式，例如：button{ width: 150px !important;}，与以上的选择器相遇时，强制使用此样式；  
  如果比较后权重相同，那么后者覆盖前者，后渲染的胜出；  
  内联样式  > id选择器样式 > 类选择器样式 > 元素选择器样式；  
  CSS选择器的使用，应该尽量避免使用 !important 和 内联样式；id通常也是与class区分开使用，前者多用于JS中的结点定位，后者多用于CSS选择器。  
  重中之重，1000/100/10/1这种权值系数的比较方式只是便于理解，真实情况下10个class并不能逆转1个id。  

张鑫旭的256个class类名选择器干掉一个id选择器实例页面 ，我试了下256个好像也不行。。。