首页 > 开发 > CSS > 正文

详解CSS中的选择器优先级顺序

2024-07-11 08:32:47
字体:
来源:转载
供稿:网友

特殊性是什么
在对一个HTML元素应用CSS样式时,常常有很多种方法可以找到元素,比如:

CSS Code复制内容到剪贴板
  1. <div id="container" class="wrap_sty">        <p class="pra">这是一个段落</p>   
  2. </div>    <style>   
  3.     #container p { color:red }        div p { color:green }   
  4.     p { color:yellow }     </style>  

可见,如果要作用到一个HTML元素的方法有很多,远远不止这些。那么如果一个元素被应用了很多同样的样式,最终会显式到哪一个样式呢?CSS对于多个选择器的优先性使用了一个叫做特殊性的方式。

CSS特殊性
选择器的特殊性分为4个等级,a b c d,从左到右,越左边的越优先, 如果一个选择器规则有多个相同类型选择器,则+1。
如果是HTML内样式,那么特殊性最优先,a=1
id选择器的特殊性是b,
类选择器、伪类选择器、属性选择器为c
标签选择器、伪元素选择器为d
先来说说一些选择器类型:
1.id选择器

CSS Code复制内容到剪贴板
  1. #myid { ... }  

2.类选择器

CSS Code复制内容到剪贴板
  1. .myclass { ... }  

3.标签选择器

CSS Code复制内容到剪贴板
  1. p { ... }  

4.属性选择器

CSS Code复制内容到剪贴板
  1. [title="mytitle"] { ... }  

由于大多数文档例如W3CSCHOOL可能并没有详细说明,或许不少人认为属性选择器是这样的  div[title="mytitle"] 或#id[title="mytitle"]等等,这样是属性选择器,严格来说,这样的并非单纯的属性选择器,而是由id选择器、标签选择器等等和属性选择共同组成的。
5.伪类选择器

CSS Code复制内容到剪贴板
  1. p:hover { ... }  

常见的伪类选择器有:
链接伪类,:link, :visited,用于锚元素。
动态伪类,:hover,:focus,:active,用于任何选择。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表