重新认识CSS的权重 [10]

标签: CSS | 发表时间:2011-05-20 11:41 | 作者:Ghost 溪梦
出处:http://www.cssforest.org/blog/

今天 大白 问了一个关于CSS权重的问题:

关于选择器权重的问题 。class的权重是10 标签权重是 1 。比如说 p span{} 权重是2. 如果11标签自选择器的组合的权重11,会不会覆盖 一个class选择器权重10的 样式?

在跟他的讨论中,重新整理了我对CSS权重的理解。

在《 样式的作用域──页面重构中的模块化设计(一) 》中有做过总结,其中提到比较重要的两点:

  1. 权值的大小跟选择器的类型和数量有关
  2. 样式的优先级跟样式的定义顺序有关

在《 继承──页面重构中的模块化设计(三) 》的评论中 operafans 也提到了 标签选择器的权值永远都比一个类选器择器的权值低,无论有多少个 但一直以来都还是没能想通。

其实规则很简单: 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数 ,至于各级别的优先级,大家应该已经很清楚了,就是:

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

这也就解释了为什么11个标签的定义会比不上1个类的定义,1个类加11个标签会比不上2个类的权重高。

相关 [认识 css 权重] 推荐:

重新认识CSS的权重 [10]

- 溪梦 - CSS森林(CSS Forest)
今天 大白 问了一个关于CSS权重的问题:. class的权重是10 标签权重是 1. 比如说 p span{} 权重是2. 如果11标签自选择器的组合的权重11,会不会覆盖 一个class选择器权重10的 样式. 在跟他的讨论中,重新整理了我对CSS权重的理解. 在《 样式的作用域──页面重构中的模块化设计(一) 》中有做过总结,其中提到比较重要的两点:.

小tip: CSS后代选择器可能的错误认识

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2286. 一、关于类选择器的一个问题. 假设有下面一个面试题,CSS代码如下:. 问:第一行和第二行文字颜色分别是. 这个例子很简单,我估计基本上都能回答正确:DOM越深的类名权重越高,因此,第一行文字红色,第二行文字绿色第一行文字绿色,第二行文字红色.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性. 容器: container 页头:header 内容:content/container. 页面主体:main 页尾:footer 导航:nav . 侧栏:sidebar 栏目:column 左右中:leftright center .