CSS-----选择器分类、层叠、特殊性与继承

1.     常用的选择器：

类型选择器----元素选择器或简单选择器：如 p{} 或 h2{}

后代选择器-----特定元素或元素组的后代（所有后代，包括孙代）：如 div p{}

ID选择器和类选择器

最常用的是：组合使用这类型、后代、ID、类选择器

2.     伪类：

      

3.     通用选择器：*

*{

     padding:0;

     margin:0;

}

为页面上的所有元素应用样式。

4.     高级选择器：CSS2.1  CSS3中的选择器

IE6及更低版本的浏览器不支持，会忽略掉整个规则，因此避免在站点功能或布局很重要的任何元素上使用这些高级选择器。

①子元素选择器和相邻同胞选择器：

子元素选择器： #nav>li{}  只选择元素的直接后代（不包括孙代）IE7及以上支持，但IE有小bug，当父元素与子元素之间有HTML注释时，就会出问题。

IE6及更低版本中，采用通用选择器模拟子选择器：现在所有后代#nav li{}上应用希望子元素具有的样式，然后用通用选择器覆盖子元素的后代上的样式#nav li *{}。

相邻同胞选择器：h2 + p{} 定位同一个父元素下某个元素之后的元素。如：给h2后面的第一个段落应用样式：h2 + p{}。IE7存在与子选择器一样的bug（目标元素之间有注释会出问题）。

②属性选择器：（只有后3种是CSS3新增）

   根据某个属性是否存在来寻找元素：acronym[title]{ border-bottom:1pxdotted #999 }

                          acronym[title]:hover,acronym[title]:focus{ cursor:help }

根据属性值来寻找元素：a[rel=”nofollow”]{ background:url(nofollow.gif) no-repeat}  一个属性可以有多个属性值，值之间用空格隔开。属性选择器允许根据属性值之一

a[rel ~= ”co-worker”]寻找元素。

只有后3种是CSS3新增的属性选择器

IE7及以上支持（彩色版），IE6不支持（黑白版）。

 

②  层叠和特殊性

层叠：样式表中，寻找同一元素可能有两个或更多规则。CSS通过层叠过程处理该冲突。

层叠首先给每个规则分配一个重要度，次序如下：

作者----站点开发者；用户----可通过浏览器应用自己的样式；浏览器或用户代理使用的默认样式

然后根据选择器的特殊性决定规则的次序。具有更特殊性的规则优于具有一般选择器的规则。若两个规则的特殊性相同，那么后定义的规则优先。

在样式表中使用特殊性：对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。

  p { color: black }

  p.intro { color: grey }

③  继承

应用样式元素的后代会继承样式的某些属性，比如颜色和字号。

直接应用于元素的任何样式总会覆盖继承而来的样式，这是因为继承而来的样式的特殊性为空。