css_selector实例

最新推荐文章于 2024-12-29 10:35:50 发布

最新推荐文章于 2024-12-29 10:35:50 发布 · 249 阅读

文章标签：

#CSS #IE #HTML #浏览器 #Blog

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了CSS选择器的优先级规则，包括如何使用ID提高样式特异性、避免使用!important的重要性以及链接状态LVHA（link-visited-hover-active）的应用等。通过实例帮助读者理解CSS中不同选择器的具体作用范围。

1 * { } 0
3 li:first-line { } 2 (one element, one pseudo-element)
5 ul ol+li { } 3 (three elements)
7 ul ol li.red { } 13 (one class, three elements)
9 style=”” 1000 (one inline styling)
11 div p { } 2 (two HTML selectors)
13 div p.sith { } 12 (two HTML selectors and a class selector)
15 body #darkside .sith p { } 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

实际经验：

1. 使用LVHA定义链接，即link-visited-hover-active，参考[Link Specificity]
2. 如果不是为了兼容浏览器，最好不要使用 !important
3. 使用ID让特性更具体，比如a.high写成 ul#blog li a.high

CSS工具与资英文好的去看下

CSS Specificity for Poker Players
CSS specificity calculator
Understanding Specificity Tutorial
Cascade Inheritance: Specificity
CSS 2.1 Selectors Explained
CSS Specificity Bugs in IE
CSS Structure and Rules
Specificity

Related Posts
No related posts
优先级 css Specificity