当前位置:网站首页 > HTML与CSS基础 > 正文

css伪类选择器优先级(伪类选择器和标签选择器优先级)



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

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

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





2.类选择器

3.标签选择器

4.属性选择器

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

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


CSS特殊性示例
下面是一些CSS选择器的特殊性示例:

选择器 特殊性 以10为基数的特殊性 1, 0, 0, 0 1000 0, 1, 0, 0 100 0, 2, 0, 0 200 0, 0, 1, 0 10 0, 0, 2, 0 20 0, 0, 1, 0 10 0, 0, 0, 1 1 0, 0, 0, 1 1 0, 0, 0, 2 2

如果两个规则的特殊性相同,那么后定义的会覆盖先定义的。

CSS重要性
CSS中还有一种东西可以无视特殊性,那就是!important,使用此标记的CSS属性总是最优先的。

在IE6中,可就没办法黄了,还是见点血吧!
IE6/7还可以在 !important 后面加点料,也不会失去味道,但是建议别这么无聊!

到此这篇css伪类选择器优先级(伪类选择器和标签选择器优先级)的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • 字体图标怎么设置大小css(css图标和字体水平对齐)2025-10-09 07:36:09
  • css3伪类选择器有哪些(css伪类选择器实例)2025-10-09 07:36:09
  • 字体图标怎么设置大小(字体图标怎么设置大小css)2025-10-09 07:36:09
  • 跳转链接生成器(跳转链接html)2025-10-09 07:36:09
  • css伪类选择器(css伪类选择器优先级)2025-10-09 07:36:09
  • Css4规范(css样式规范)2025-10-09 07:36:09
  • 字体图标库css(字符图标css)2025-10-09 07:36:09
  • Css4规范(css标准规范)2025-10-09 07:36:09
  • 制作网页的代码DW(制作网页的代码html)2025-10-09 07:36:09
  • css grid布局和flex布局(css grid flex)2025-10-09 07:36:09
  • 全屏图片