探讨浏览器CSS选择器的权重!!!

举报
tea_year 发表于 2021/12/30 00:25:19 2021/12/30
【摘要】 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>js控制CSS案例</title> <!--2.设计样式--> <style>...


 

  
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>js控制CSS案例</title>
  6. <!--2.设计样式-->
  7. <style>
  8. #loginSec{width:300px;height: 150px; background-color: #eee;padding: 20px;}
  9. input#username,input#pwd{
  10. outline: none;
  11. border-radius: 10px;/*圆角*/
  12. border:1px solid #666;
  13. }
  14. /*获得焦点的样式*/
  15. .fStyle{
  16. background-color: #ff9;
  17. border: 1px solid #f00;
  18. }
  19. .bStyle{
  20. background-color: #fff;
  21. border: 1px solid #666;
  22. }
  23. </style>
  24. <!--3.写js来控制CSS-->
  25. <script>
  26. //第二部代码升级
  27. //提取公共代码,得到一个函数;-->一门技术jquery
  28. //函数名:叫$
  29. function $(obj){
  30. return document.getElementById(obj);
  31. }
  32. //获得焦点事件
  33. function focusStyle(obj){
  34. $(obj).className="fStyle";
  35. /* $(obj).style.backgroundColor="#ff9";
  36. $(obj).style.borderColor="#f00";*/
  37. }
  38. //失去焦点事件
  39. function blurStyle(obj){
  40. $(obj).className="bStyle";
  41. /*$(obj).style.backgroundColor="#fff";
  42. $(obj).style.borderColor="#666";*/
  43. }
  44. </script>
  45. </head>
  46. <body>
  47. <!--1.页内布局-->
  48. <section id="loginSec"> <!--username它是实际参数-->
  49. 用户:<input type="text" id="username" οnfοcus="focusStyle('username')" οnblur="blurStyle('username')"/><br/><br/>
  50. 密码:<input type="password" id="pwd" οnfοcus="focusStyle('pwd')" οnblur="blurStyle('pwd')"/><br/><br/>
  51. <button id="btnLogin">登陆</button>
  52. <button id="btnEsc">取消</button>
  53. </section>
  54. </body>
  55. </html>

出现的问题是边框设置无效,焦点 获得和消失,后来问了下,发现是焦点权重问题,把权重问题给他家分享下。

改成input直接设置,就好了。分享CSS权重几倍知识点如下:

CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式;ID>class>元素。

一、样式类型

  1、行间

<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>

 

  2、内联

<style type="text/css">
   h1{font-size:12px;
      color:#000;
      }
</style>

   3、外部

<link rel="stylesheet" href="css/style.css">

二、选择器类型

  1、ID  #id

  2、class  .class

  3、标签  p

  4、通用  *

  5、属性  [type="text"]

  6、伪类  :hover

  7、伪元素  ::first-line

  8、子选择器、相邻选择器

三、权重计算规则

  1. 第一等:代表内联样式,如: style=””,权值为1000。
  2. 第二等:代表ID选择器,如:#content,权值为0100。
  3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
  4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
  5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  6. 继承的样式没有权值。

四、比较规则

  1. 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较,前一等级相等才往后比。
  2. 无论是行间、内部和外部样式,都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式;ID>class>元素。之所以有这样的错觉,是因为确实行间为第一等的权重,所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后,所以覆盖掉了之前的。
  3. 在权重相同的情况下,后面的样式会覆盖掉前面的样式。
  4. 通配符、子选择器、相邻选择器等的。虽然权值为0000,但是也比继承的样式优先。

五、!important

  1. !important 的作用是提升优先级,换句话说。加了这句的样式的优先级是最高的(比内联样式的优先级还高)。
    <style>
        p{
            color:red !important;
        }
    </style>
    <p style="color:blue;">我显示红色</p>    
  2. ie7+和别的浏览器对important的这种作用的支持度都很好。只有ie6有些bug
    p{
      color:red !important;
      color:blue;    
    }//会显示blue

    但是这并不说明ie6不支持important,只是支持上有些bug。看下面

    复制代码
    p{
      color:red !important;  
    }
    p{
      color:blue;  
    }
    //这样就会显示的是red。说明ie6还是支持important的。
    复制代码

六、实例

  1. 复制代码
     a{color: yellow;} /*特殊性值:0,0,0,1*/
     div a{color: green;} /*特殊性值:0,0,0,2*/
    .demo a{color: black;} /*特殊性值:0,0,1,1*/
     .demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
     .demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
     #demo a{color: orange;} /*特殊性值:0,1,0,1*/
     div#demo a{color: red;} /*特殊性值:0,1,0,2*/
    
    <a href="">第一条应该是黄色</a> <!--适用第1行规则-->
    <div class="demo">
        <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则,第4行优先级高-->
        <a href="">第三条应该是黑色</a><!--适用第2、3行规则,第3行优先级高-->
    </div>
    <div id="demo">
        <a href="">第四条应该是红色</a><!--适用第5、6行规则,第6行优先级高-->
    </div>
    复制代码

文章来源: aaaedu.blog.csdn.net,作者:tea_year,版权归原作者所有,如需转载,请联系作者。

原文链接:aaaedu.blog.csdn.net/article/details/79576788

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。