工作中常用的高效的CSS代码

最常用的有四种选择方法:

Id规则选取,比如

CSS代码
  1. button#button{}
  2. #urlBar[type=」text」]{}
  3. div>p>span#demo{}

class规则选取,比如

CSS代码
  1. button.toolbarButton{}
  2. .fancyText{}
  3. menuitem>.menu-left[checked=」true」]{}

Tag规则选取,比如

CSS代码
  1. td{}
  2. div>p{}
  3. input[type=」checkbox」]{}

统配选择器,比如

CSS代码
  1. *
  2. :after
  3. [hidden=」true」]

他们都是从最右边开始匹配,直到最左边整个规则结束。
这样就存在一个问题,比如说最右边的规则已经能确定你要选取到元素。
那更多的规则匹配就造成了性能上的浪费。
比如说div > p > span#demo{}
div > p > span根本没有意义。

改进:
ID是唯一的。没有必要附加多馀的规则。也能精准的匹配到。

CSS代码
  1. button.toolbarButton{}->.toolbarButton{}

用过多的规则,不如直接给元素一个class
比如:div > p > span > a{}
可能给a一个特殊表现的。直接给a写一个class即可。
特殊情况需要特殊对待。
比如有时候要保证页面结构的乾淨。以便适用后期改版的需要,使用到这种方式。也是可以的。平衡取出一个最佳方案。

使用继承

CSS代码
  1. #demo.left{text-align:left}->#demo{text-align:left}
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇