css基础选择器使用示例

1、在编写CSS代码的时候，我们会出现多个样式规则作用于用一个元素的情况，例如复制代码代码如下:header><navclass="nav-main"id="navigation">Herebackground</nav></header>headernavbackground-color:red;#navigationbackground-color:green;</p><p>.nav-mainbackground-color:blue;ca39/special/ranking/以上三个样式

2、规则都会作用于ID值为"navigation"的nav标签，最终哪个样式规则会生效呢，这取决于选择器的特殊性（或优先级）高低，选择器特殊性高的样式会覆盖特殊性低的样式，经过测试nav标签的背景会显示为green绿色。那么选择器特殊性是如何计算的呢？1. 通常，我们使用四个以逗号分隔的数字来表示特殊性，比方每个元素选择器奉献特殊性为0,0,0,1;每个类、伪类或者属性选择器的特殊性为0,0,1,0;每个ID选择器的特殊性为0,1,0,0.计算一个组合选择器的特殊性的时候就先计算各种选择器的数量以及对应的特殊性再相加，比方复制代码代码如下:divululli/*0,0,0,44

3、个元素选择器*/</p><p>div.asideulli/*0,0,1,31个类选择器，3个元素选择器*/</p><p>a:hover/*0,0,1,11个伪类选择器，1个元素选择器*/</p><p>div.navlinksrenshenrh2a:hover/*0,0,2,21个类选择器，1个伪类选择器，2个元素选择器*/</p><p>#titleem/*0,1,0,11个ID选择器，1个元素选择器*/</p><p>h1#titleem/*0,1,0,21个ID选择器，2个元

4、素选择器*/</p><p>*/*0,0,0,01个通用选择器*/注：多类选择器有多少个类就计算多少个类，不支持多类选择器的IE6会理解为一个类比较选择器特殊性高低直接从左向右依次比较，数字大的则优先级更高，如果相同就比较下一位，人参皂昔rh2所有位都相同则优先级是一样高，当选择器优先级一样高的时候后申明的样式会覆盖前面申明的样式每个级别的优先级值是相互独立的，13个元素选择器写在一堆也不会比1个类选择器的特殊性高第一个0是用于行内样式的，人参皂昔rh2且仅用于行内样式复制代码代码如下:<navstyle="background-color:gray;&q

5、uot;></nav><!-1,0,0,0->有一样东西可以无视特殊性，人参皂昔rh2那就是important。使用important可以把任何样式规则标记为重要复制代码代码如下:.nav-main(background-color:blue!important;color:#666;基本上，任何重要的样式规则都可以覆盖没有标记为重要的样式规则，复制代码代码如下:<divid="gohome"><ahref="/"id="home">Home</a></div&g

6、t;div#gohomea#home(color:red;</p><p>diva(color:green!important;上面的代码会得到一个绿色green的链接，第一个规则有非常高的特殊性0,2,0,2，但是在important面前一样没用，除非我们给第一个规则也标记为重要复制代码代码如下:div#gohomea#home(color:red!important;</p><p>diva(color:green!important;这时候链接就变为红色red了，都标记为重要的情况下，则会使用前面提到的特殊性规则来解决，所以使用important的时候应当权衡，尽量不要用另外，IE6是支持!important的，只是不完全支持而已，当在同一个选择器中，在标记为重要的样式规则之后又重新定义了此样式则!important将失效复制代码代码如下:.header(color:red!important;/*标准汶览器red*/color:green;/*IE6gree