CSS 选择器与优先级

   很多时在做页面调试的时候,总是出现一些明明应该是显示正常, 但却总是不正常的样式问题, 其实除了是浏览器的差异造成一些不正常之外, 很多时候是对CSS的选择器与优先级理解不够造成.

   样式使用方法主要分两大类, 一类是定义在CSS文件中, 一类是定义在元素的style属性中(称为内联样式), 内联样式是最高优先级, 即: 如果在CSS文件中定义的元素的某些样式与内联样式定义的相同的样式属性, 那么内联样式生效.

   如果有多个CSS文件对同一元素定义了样式, 那最后那个定义生效, 但是首先决定于选择器的优先级, 即只有同样优先级的选择器,最后出现的生效.

   我们把样式定义到CSS文件中时, 是什么决定样式对那个或那些元素起作用呢, 选择器就是用来做这个决定的.选择大致分为三大类,其它类型的选择器都是在三类的基础上进行扩展.

1. 标签选择器, 类似于BODY, HTML, DIV, 等等这类HTML中标准元素标签, 它是作用于整个页面的指定元素的, 假设优先级为1

　　div { background: red;}

　　上面的CSS定义就是指明页面中所有的div背景设置为红色, 

2. 类选择器, 为一批样式属性设置指定一个名称, 并把这个名称设置到元素的class属性中, 这个页面元素就会使用这个定义好的样式进行渲染了. 假设优先级为10

　　.mymenu{ float: left; background: gray; color: white;}

　　<ul class="mymenu"><li> item</li></ul>

3.ID选择器, 页面元素都可以指定一个唯一ID, 在CSS定义中也可以直接使用对应ID进行样式定义, 假设优先级为 100

　　#container {background: gray;}

　　<div id="container"></div>

以上这些看起来是不是很简单, 但是通过子元素选择扩展起来就不简单了, 看下面的例子:

　　div li .test {background: red}

　　它的意思是 在页面中所有DIV中的li 元素中设置了class是test的元素的样式, 那它的优先级是多少呢?

　　div li {background: blue;}

　　这个优先级是多少呢?这两个样式倒底那个背景会生效呢?

原来选择器的优先级是会累加的

　　div(1) + li(1) + .test(10) = 12

　　div(1) + li(1) = 2

数字越大, 优先级越高, 即是在写选择器时, 选择器的定义越精确, 优先级会越高.

 

在上面三种的选择符的基础上再扩展出四种种选择器

后代选择器: 就是在元素内部中所有的符合的元素

　　.parent div

　　这个意思是在class为parent中的所有div, 记住是所有不管它所在的层次

子选择器

　　.parent > div

　　这个意思是在class为parent中的第一级子元素中的div元素

伪选择器(:first-child, :last-child, ...)IE9以上才支持, IE8及以下不支持, 这是对选择器已经确定的元素集合再次进行过滤

　　.parent > div:first-child

　　这个意思是在class为parent中的第一级子元素中的第一个div元素

　　.parent > div:last-child

　　这个意思是在class为parent中的第一级子元素中的最后一个div元素

属性选择器, 使用元素的属性来进行再次过滤

　　.parent > input[name=test]

　　这个意思是在class为parent中的第一级子元素中的input元素,并且名称为test的input元素