Skip to main content

CSS specificity


     A good article

     http://htmldog.com/guides/css/intermediate/specificity/

It may not seem like something that important, and in most cases you won’t come across any conflicts at all, but the larger and more complex your CSS files become, or the more CSS files you start to juggle with, the greater likelihood there is of conflicts arising.

More Specific = Greater Precedence

If the selectors are the same then the last one will always take precedence. For example, if you had:

p { color: red }
p { color: blue }
The text in the box of p elements would be colored blue because that rule came last.
However, you won’t usually have identical selectors with conflicting declarations on purpose (because there’s not much point). Conflicts quite legitimately come up, though, when you have nested selectors.

div p { color: red }
p { color: blue }
In this example it might seem that a p within a div would be colored blue, seeing as a rule to color p boxes blue comes last, but they would actually be colored red due to the specificity of the first selector. Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

Calculating Specificity

The actual specificity of a group of nested selectors takes some calculating. Basically, you give every ID selector (“#whatever”) a value of 100, every class selector(“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. Then you add them all up and hey presto, you have the specificity value.
  • p has a specificity of 1 (1 HTML selector)
  • div p has a specificity of 2 (2 HTML selectors, 1+1)
  • .tree has a specificity of 10 (1 class selector)
  • div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)
  • #baobab has a specificity of 100 (1 id selector)
  • body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)
So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative pwould win out over all of them, regardless of the order.
Labels:

Comments

Post a Comment

Popular posts from this blog

北美 加州 草坪维护 草黄了怎么办

当今中国有句顺口溜， 叫做：穷的时候种稻， 富的时候种草。我虽然 不富，但也种了几年的 草。我对种草其实懂得 不多，虽自学不辍，但 终未成才。不过到底种 了几年的草，心得和体 会总是有的。现在把我 的心得体会写出来，希 望对房前屋后有块小草 坪的朋友们，不管是穷 还是富，都有些帮助。 草地上的草，都属于禾 本科（Grass Family），与竹 子、水稻、小麦、甘蔗 和狗尾巴花是同一个科 的植物。从个体的数量 和分布的范围来讲，禾 本科植物应该是植物界 最大的科了。草本的禾 本科植物通常有两种生 长的形态，一种叫蓬草 (bunch grass)，一种叫 坪草(sod grass)。用来做 草坪的草，当然都是坪 草 。坪草的物种和品种很 多，不同地区不同气候 条件种的草不一样，但 也有一些共性。一般来 说，当地商店里买的草 籽（grass seeds）和草皮（ sod），都是比较适 合当地的自然条件的。 一．维护和保养草坪必 做的四件事情 1．割草。定期割草， 不仅能使草坪美观，而 且也可防止或减缓坪草 从营养生长到生殖生长 的过渡。营养生长就是 长叶子，生殖生长就是 开花结籽。很多人都知 道，春天的时候有一段 时间不割草，草就开花 结籽了。大家也见过， 边边角角割不到草的地 方，那里的草就会开花 结籽。 2．浇水。对北美大部 分地区来说，春秋天时 可视情况少浇水甚至不 浇水。草地最需要浇水 的时候是夏天，因为夏 天最热最干，水分蒸发 快。至于浇水要多频繁 ，那就看你想草地是保 绿，还是保命。如果想 保绿，那草地每星期得 有一英寸的水量。除非 有自动浇水系统，浇水 是很费时间的，也费钱 。我只想我的草地保命 ，所以我的草地夏天基 本不浇水，只在特别容 易干死的草地或在特别 干旱的年份浇点水。所 以到8-9月份的时候 ，我的草地就黄黄的了 ，有些难看。不过，一 场秋雨来，草地依旧绿 。 3．施肥。草地的肥料 应以氮素为主，钾素得 有一点，但磷的含量可 以很低。我用的最多的 草坪肥料是30-0- 4。现在有一种运动， 推崇不含磷素的草地肥 料，因为磷素施用过多 ，会引起水体（如湖泊 ，池塘）的富营养化。 施肥的话，还是得买个 撒肥机（spread er/broadca ster），手持的或 手推的型号都行，当地 商店都有卖的。没有撒 肥机，肥料会撒得很不 均匀。 4．杂草...
Post a Comment
Read more

湾区好吃的中餐馆

一个伪吃货在湾区的checklist 来源： 徐聪的日志 海鲜： Boiling Crab （San Jose）， Joe's Crab Shack (San Francisco) ， Tomi Sushi & Seafood Buffet（San Jose）， Tatami Sushi & Seafood Buffet（Cupertino） 番外：Pier 39  的大螃蟹  （San Francisco） Boiling Crab的螃蟹从来都是酒香不怕巷子深，关键在于它家的酱绝对不会让人想起它 是一家西餐馆。它家的龙虾也是一绝，当然一旦点了龙虾还打算吃饱的话人均基本在40 刀以上。它家在San Jose有两家分店，如果想避免排长队的话推荐周末中午11点50点以 前（12点开门）去101高速边上那家，屡试不爽。 Joe's Crab Shack是一家全美连锁的海鲜餐馆，一锅端 (Steampot) 的吃法很有特色。 Tomi Sushi & Seafood Bufferz中文名叫涛味，排在Tatami之前的原因是它家的口味比 较偏中餐，龙虾膏蟹做的不错（不是每天都有）。最近中午去过一次，东西很少，不推 荐中午去（虽然价格便宜一些）。 Tatami跟南加著名的Todai都是差不多的日式海鲜自助，生鱼片比较新鲜，不过没有 Todai每小时限量的烤龙虾尾。 渔人码头的螃蟹主要的砝码是价格，但跟Boling Crab一比也不见得能便宜多少。有一 家摊位上面写着“我们通晓国、粤、英语”，每次都会去。 川菜： 御食园（San Francisco），金饭碗（Berkeley）， 红翻天（Foster City）， 吃香喝 辣（Newark）， 老赵川菜（Mountain View）， 鹿鸣春（Berkeley）， 福恩园（ Menlo Park），麻辣诱惑（Fremont）， 巴山蜀水（Milpitas） ， 福恩园（San  Mateo）， 大四川（Palo Alto）， 麻辣诱惑（San Jose）， 山城私房菜（Milpitas ），麻辣帝国（San Mateo） 川菜的菜品基本都是那几样，就不单独推荐了。 排名第一的Z&Y我觉得就不用...
Post a Comment
Read more

California life 新手的湾区 购房 全攻略 (转)

原帖在华人网，感觉写得太全面了，本人非房黑房托，只做技术性讨论，欢迎发表意见 第一阶段：全面了解 去年12月12号的时候，我正好怀孕37周，冒着风险跨东西海岸大搬家到了Bay。刚下飞 机的时候正好下着雨，但是一点也不冷，反而很舒服。来到LG租的apartment，还是吃 惊了一小下，因为从Atlanta rent $750 每月 1000sqft的1bed1bath搬到 $1700每月 1000sgft的2bed2bath，这个落差还是比较强烈滴。。。 不过呢，既来之则安之，我立马投入了100%的热情开始shopping，布置这个临时的新家 来迎接宝宝的出生。要知道在37周之前，我连最基本的crib都没准备，更不用说其他的 了。然后就是宝宝出生，出了月子我开始努力换工作，接下来去新公司上班，等到一切 稳定下来，大概是4月份的样子，我打算开始做买房的初步了解了。。。 首先就是找agent了，一般就是靠熟人推荐。我找的agent优点很明显，经验很丰富，很 热情，很耐心，不push，缺点也很明显，就是不太愿承担责任，她会很小心的提供涉及 到关键问题的建议，就怕给你产生误导。这样也不是不好，但是对于我们这样没有经验 的新手来说，从agent那里拿到的答案总是模棱两可的，我们就很难做出判断。但是 buyer和agent其实就是一个team，买房就是一个teamwork，在这个过程中，通过一次次 的沟通，最终我们还是磨合好了。整个过程下来，很难说我们对agent是不是满意，但 是只要帮助买到了满意的房子，那就应该是一个好的agent。 4月份和agent初步聊过后，我们当时给出的dream house的条件和大多数刚刚从东部， 中西部农村搬来bay的同学基本上是一样的： 1。 SFH，房子要大，1700sqft以上，越新越好，最好2层的。 （atlanta 基本配置都 是这样的阿。。。） 2。 院子小点没关系  （在atlanta见过的朋友家的院子都是草坪，就没有精心收拾过 的，所以那个时候对后院完全没有概念。。。） 3。 学区中等就行，小学800+。（小孩才刚出生，到上学还早呢，如果到时候来不及换 房子，那就上私立好了。。。） 4。 commute 30-40分钟都可以。 （在atlanta我们还经常开车1个小时去吃饭呢，高速 30分钟也...
Post a Comment
Read more