您的位置：首页 > Web前端 > CSS

CSS优先级、CSS选择器、解决冲突——继承与层叠

2014-10-12 11:09 417 查看
CSS优先级
                                    最高优先级

内联样式<p style="...;...;"> ...... </p>
内部样式表<style type="text/css">  ......  </style>
外部样式表<link rel="stylesheet"  type="text/css"  href="   "/>
浏览器默认 
                                    最低优先级

CSS Selectors

元素选择器p{ ...... }指定元素
类选择器.class_name{ ...... }类属性值等于selector中指定值的元素
ID选择器#id_name{ ...... }id属性值等于selector中指定值的元素
通用选择器*{ ...... }当前页面的所有元素
属性选择器img[alt]{ ...... }
img[src="image.png"]{ ...... }		带有括号内指定属性/带有特定值的属性的任何元素
子选择器li>p{ ...... }右边元素是左边的直接子节点时(IE6及更早版本不支持)
后代选择器li p { ...... }<li>元素包含的所有的<p>元素
相邻兄弟选择器h1 + p { ...... }在同一DOM层级中的元素(IE6及更早版本不支持)
伪类a:link,a:focus { ...... }根据链接的状态样式化元素
伪元素p:first-letter { ...... }

p:before { ...... }

样式化元素的特定部分(第一行或者第一个字母)，或在其前后插入内容
组合选择器h1,p{ ...... }
p.warning{ ...... }
div#foot{ ...... }
p.info, div#foot{......}		 
解决冲突：继承与层叠
1.继承：某个属性从父元素传递到子元素的机制

2.继承的意义：不用为每个元素指定的属性，简化了代码，若不需继承属性，覆盖即可

3.什么元素可以继承属性？  除了<html>（根元素）都有，因为只要它无父元素。

4.哪些属性可以继承？   思考一下就知道，比如backgroun-color属性。

层叠：当多个冲突和层叠的CSS声明应用在同一元素时，用来控制应用CSS声明的顺序

1重要性，若声明具有一样的重要性，则计算特殊性

2特殊性，若声明具有一样的特殊性，则考虑源顺序

3源顺序

1）重要性

浏览器内建样式表优先级最低
作者样式表中的常规声明
用户样式表中的常规声明
作者样式表中的重要声明重要声明：
｛ ... ; ... !important;｝
用户样式表中的重要声明优先级最高
2）计算特殊性
有4个成分——abcd,a最特殊,d特殊性最少

成分a若style属性中有一个声明，则为1,否则为0h1——0,0,0,1
成分b选择器中id选择器数目.info——0,0,1,0
成分c属性选择器、类选择器、伪元素数目#bar——0,1,0,0
成分d元素选择器、伪元素的数目ul#nav a:link——0,1,1,2
***组合符、通用符对特殊性无影响

3）源顺序

后面的声明覆盖前面的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航