阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS定义的权重

      CSS定义的权重

      • 第一等:代表内联样式,如: style=””,权值为1000。
      • 第二等:代表ID选择器,如:#content,权值为100。
      • 第三等:代表类,伪类和属性选择器,如.content,权值为10。
      • 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

      最后把这些值加起来,再就是当前元素的权重了。

      权重算出来了,但是某个元素到底用哪个样式,还有3个规则,:

      如果样式上加有!important标记

      例如:

      p{ color: gray !important}
      

      那么始终采用这个标记的样式。

      匹配的内容按照CSS权重排序,权重大的优先

      可以看到,CSS权重只是决定应用哪个样式的其中一个步骤,不过这个步骤是最复杂的,上面已经说过了。

      如果权重也一样,按照它在CSS样式表里声明的顺序,后声明的优先

      h1 {color: blue}
      h1 {color: red}
      

      最终胜出的是 color:red

      精简总结

      以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:

      如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录