1、选择器(优先级)
选择器种类:
严格来讲,选择器的种类可以分为三种:标签名选择器
、类选择器
和ID选择器
。
而所谓的后代选择器
和群组选择器
只不过是对前三种选择器的扩展应用。
而在标签内写入style=""的方式
,应该是CSS的一种引入方式,而不是选择器,因为根本就没有用到选择器。
而一般人们将上面这几种方式结合在一起,所以就有了5种或6种选择器了。
选择器优先级:
CSS选择器效率从高到低的排序如下:
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.相邻选择器(h1+p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器(*)
8.属性选择器(a[rel=“external”])
9.伪类选择器(a:hover, li:nth-child)
那么是如何计算优先级的呢:
一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。
通常我们用1表示标签名选择器
的优先级,用10表示类选择器
的优先级,用100表示示ID选择器
的优先级。
比如说:
.polaris span {color:red;}
的选择器优先级是10 + 1
也就是11
;而.polaris
的优先级是10
;浏览器自然会显示红色的字。
例如下面的优先级计算:
div.test1 .span 优先级 1+10 +10
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 + 1
在这里不得不提使用在标签内引入CSS的方式来写CSS,即:
<div style="color:red">polaris</div>
这时候的优先级是最高的。我们给它的优先级是1000
.