css选择器优先级学习

  1. 当初并不明白为什么要学css优先级。感觉只要效果实现了就行。撑死了我写的css执行效率不高。
    但是当我去改别人的css的时候,优先级的效果就显现出来了。
    比如复写样式经常会用到优先级的问题,通常情况下
    ①首先少用!important②我的做法一般是增加一个class类名,但这样显然增加了样式的冗余程度③以后多思考用css选择优先级在不增加类名的情况下解决样式复写问题。

css选择器书写的注意顺序

后代选择器

Tag category rules should never contain a child selector。标签名后面永远不要跟子元素。
"The most fundamental concept to learn is this rule filtering. The categories exist in order to filter out irrelevant rules (so the style system doesn’t waste time trying to match them)."

浏览器是怎么解析css的

div.nav > ul li a[title]
This last part of the selector (in this case a[title]) is called the “key selector” and it’s ultimately what will determine how efficient your selector will be.
Since a selector that fails is more efficient than if the same selector matches we want to optimize key selectors to fail. The more specific the key selector, the quicker the browser find mismatches.

关于!important的使用经验

Always look for a way to use specificity before even considering !important
Only use !important on page-specific CSS that overrides site-wide(全站范围) or foreign CSS (from external libraries, like Bootstrap or normalize.css).
Never use !important when you're writing a plugin/mashup.
Never use !important on site-wide(全站范围) CSS.

翻译

Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important
Never 永远不要在你的插件中使用 !important
Never 永远不要在全站范围的 css 上使用 !important

参考文献

  1. css优先级
  2. Writing efficient CSS
  3. CSS Selectors: Should You Optimize Them To Perform Better?
  4. CSS Selector Performance has changed! (For the better)

你可能感兴趣的:(css选择器优先级学习)