css基础选择器使用示例.doc

《css基础选择器使用示例.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、个人收集整理勿做商业用途在编写CSS代码的时候，我们会出现多个样式规则作用于用一个元素的情况，例如复制代码代码如下：header〉〈navclass=”nav—main”id=”navigation”〉Herebackgroundheadernav｛background-color：red;}#navigation{background-color：green；｝

2、个样式规则都会作用于ID值为"navigation"的nav标签，最终哪个样式规则会生效呢,这取决于选择器的特殊性（或优先级)高低，选择器特殊性高的样式会覆盖特殊性低的样式，经过测试nav标签的背景会显示为green绿色。个人收集整理勿做商业用途那么选择器特殊性是如何计算的呢?通常,我们使用四个以逗号分隔的数字来表示特殊性，比如：1。每个元素选择器贡献特殊性为0，0，0，1；2.每个类、伪类或者属性选择器的特殊性为0，0,1，0；3。每个ID选择器的特殊性为0，1,0，0.计算一个组合选择器的特殊性的时候就先计算各种选择器的数

3、量以及对应的特殊性再相加，比如复制代码代码如下：divululli/*0,0，0，44个元素选择器*/〈p〉＃titleem/*0,1，0，11个ID选择器，1个元素选择器*/〈/p>

h1#titlee

4、m/＊0,1，0，21个ID选择器，2个元素选择器＊/

＊/＊个人收集整理勿做商业用途0，0,0,01个通用选择器＊/注：多类选择器有多少个类就计算多少个类，不支持多类选择器的IE6会理解为一个类比较选择器特殊性高低直接从左向右依次比较，数字大的则优先级更高，如果相同就比较下一位，人参皂苷rh2所有位都相同则优先级是一样高，当选择器优先级一样高的时候后申明的样式会覆盖前面申明的样式每个级别的优先级值是相互独立的，13个元素选择器写在一堆也不会比1个类选择器的特殊性高第一个0是用于行内样式的，人参皂苷rh2且仅用于行

5、内样式复制代码代码如下:〈navstyle="background—color:gray;">〈/nav〉<！—-1,0，0，0——>有一样东西可以无视特殊性，人参皂苷rh2那就是个人收集整理勿做商业用途!important。使用!important可以把任何样式规则标记为重要复制代码代码如下：。nav-main｛background-color:blue！important；color:#666；｝基本上，任何重要的样式规则都可以覆盖没有标记为重要的样式规则，复制代码代码如下:〈divid="gohome”>〈ahref="

6、/”id=”home">Home

diva｛color:green！important;个人收集整理勿做商业用途｝上面的代码会得到一个绿色green的链接,第一个规则有非常高的特殊性（0,2，0，2）,但是在!important面前一样没用,除非我们给第一个规则也标记为重要复制代码代码如下：div＃gohomea＃home｛color:red！important;}〈/p>〈p>diva{color:green!important；}这时候

7、链接就变为红色red了，都标记为重要的情况下，则会使用前面提到的特殊性规则来解决，所以使用！important的时候应当权衡，尽量不要用个人收集整理勿做商业用途另外，IE6是支持！important的，只是不完全支持而已,当在同一个选择器中，在标记为重要的样式规则之后又重新定义了此样式则！important将失效复制代码代码如下:。header{color:red!important;/*标准浏览器red＊/color:green;/*IE6green！important失效*/｝再有就是IE6/7可以允许在!importan

8、t后面添加一些文字,依然能识别复制代码代码如下:.header{color：red！importantie；/*ie6/7red*/｝