关于css优先级及怎样设计css书写

html-css019

关于css优先级及怎样设计css书写,第1张

css大致有4个级别，一个是浏览器默认css，一个是外部css，一个是内部css，一个是内联css，他们的优先级逐渐提高，也就是内联css优先级最高，何为内联，就是标签里设置的css样式，举个例子<p style="color:red">this is a paragraf.</p>这里直接在标签里设置的样式就是内联样式，而内部css就是在本页面里<style type="text/css">.body{color:red}</style>来书写的css，而外部css就是引入的外部css样式表了。下面说一下css样式表的设计，刚开始的时候，我感觉如果2个选择器，或者多个选择器拥有相同的css样式，就应该将他们合并，这样既可以节省空间，有方便查看，但是，我的想法在实践中被无情的打击了，当你设计一个大型网站的css时，每一个选择器他们的样式是不固定的，有时候可能会不停的改变，这样入过一个样式修改了，和他公用的选择器怎么办？

选择器优先级：

通常我们可以将CSS的优先级由高到低分为六组：

1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。IE 6不支持这个属性；

2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。

3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0} 会覆盖 .classname{margin:3px}。

4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px} 会覆盖 div{margin:6px}

5、第五级由一个或多个 类型选择器定义。如 div{margin:6px} 覆盖 *{margin:10px} 。

最低一级的选择器是为一个通配选择器，用*{margin:10px}这样的类型来定义。

另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如 #i100

*.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{}

，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。相同级别的优先级：

当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：

1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。

2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。

3、第三级的优先属性由<link/>标签所引入的样式表定义。

4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。

5、第五级优先的样式由用户设定。

最低级的优先权由浏览器默认。