CSS选择器相关以及CSS选择器的优先级

偏执的太偏执、 2022-08-19 02:18 413阅读 0赞

首先，当我们给css中的选择器设定样式后，有一些属性并没有起作用。通过FireBug查看发现一些属性被覆盖了。那么CSS的优先级是如何的呢？

在CSS中，基本选择器诸如 id选择器，class类选择器，还有标签选择器。组合使用的时候，又有后代选择器和群组选择器。

语法：

id选择器：#id

  1. <style type="text/css">
  2.         #mydiv{
  3.             color: red;
  4.         }
  5.     </style>
  6.     <body>
  7.         <div id="mydiv">
  8.             <p>文字相关</p>
  9.         </div>
  10.     </body>

类选择器：.class

  1. <style type="text/css">
  2.         .cls{
  3.             color: red;
  4.         }
  5.     </style>
  6.     <body>
  7.         <div class="cls">
  9.         </div>
  10.     </body>

标签选择器：div, p span等。

  1. <style type="text/css">
  2.         .cls{
  3.             color: red;
  4.         }
  5.     </style>
  6.     <body>
  7.         <div>
  8.             <p>文本</p>
  9.         </div>
  10.     </body>

后代选择器：

  1. <style type="text/css">
  2.         div .mytext{
  3.             color: red;
  4.         }
  5.     </style>
  6.     <body>
  7.         <div>
  8.             <p class="mytext">文本</p>
  9.         </div>
  10.     </body>

群组选择器：

  1. <style type="text/css">
  2.         div .mytext,p{
  3.             color: red;
  4.         }
  5.     </style>
  6.     <body>
  7.         <div>
  8.             <p class="mytext">文本</p>
  9.             <span>
  10.                 哈哈哈哈哈
  11.             </span>
  12.         </div>
  13.     </body>

以上共五种选择器。
选择器的优先级：

以下面的代码为例 

  1. <style type="text/css">
  2.         #mydiv span{
  3.             color: red;
  4.         }
  5.         span {
  6.             color: black;
  7.         }
  8.     </style>
  9.     <body>
  10.         <div id="mydiv">
  11.             <span>
  12.                   文本内容
  13.             </span>
  14.         </div>
  15.     </body>

执行结果后，文本是红色的。也就是说 上面的css样式覆盖了下面的样式。

出现这个结果的原因是 下面的优先级不够。

优先级如何确定呢？

一般给定id选择器的优先级为100 class选择器优先级为 10 标签选择器优先级为 1

当我们遇到诸如此类：

  1. #mydiv p span .block
  2.         .block span
  3.         span a .red
  4.         .wrap
  5.         a
  6.         #div

选择器优先级可以这么算：

  1. #mydiv p span .block    100+1+1+10 = 112
  2.         .block span            10+1 = 11
  3.         span a .red            100+1+10 = 111
  4.         .wrap                  10
  5.         a                      1
  6.         #div                   100

优先级不言而喻。

优先级使用以上已经介绍清楚，那么 如何根据情况选择最适合的选择器呢？

  • 最常用类选择器
  • id最好使用在页面只出现一次的标签内。
  • li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。
  • HTML标签中用style引入的css样式的优先级1000 但是不提倡。因为不符合解耦性。

那么浏览器是如何针对css选择器来查找元素的？

  1. 浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:
  3. <style> 
  4. DIV#divBox p span.red{color:red;}  
  5. ><style> 
  6. <body> 
  7. <div id="divBox"> 
  8. <p><span>s1</span></p> 
  9. <p><span>s2</span></p> 
  10. <p><span>s3</span></p> 
  11. <p><span class='red'>s4</span></p> 
  12. </div> 
  13. </body>

浏览器的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父辈元 素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。

如何让自己的css样式更加简洁高效？

css高效的原理主要是减少浏览器的查找

类选择器前不用标签选择器 特例：多个标签的类选择器相同 但是要求样式有些不一样。

id选择器前不用标签选择器。

如：

  1. a .red
  2. b .red

尽量减少层级关系

如：

  1. #div p span .red
  3. 应该使用：.red

使用class选择器代替层级关系。

如：

  1. #mydiv p span a
  3. {
  4. <span style="font-family: Arial, Helvetica, sans-serif;">    display: block;</span>
  6. }
  8. 替代：
  9. .block {
  10.   display: block;
  11. }

发表评论

表情：
评论列表 （有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css选择器优先级

    最初接触css选择器优先级这一块的内容的时候，是以下面这张图为准： ![css选择器优先级][css] ，按照上图进行计算，但是我昨天看了一篇文章发现这样算是错误的。 文

    约定不等于承诺〃约定不等于承诺〃/ 0 赞/ 449 阅读

    相关 CSS选择器优先级比较

    CSS选择器中比较常见的有标签选择器、ID选择器、类选择器以及子选择器。而事实上，CSS选择器如果细分下来，竟然多达40多种。   那么当我们在碰到通过多种形式对同一个元素

    爱被打了一巴掌爱被打了一巴掌/ 0 赞/ 410 阅读