css选择器种类及优先级顺序

CSS选择器种类

在网页设计和网站制作过程中，会使用CSS来控制网页的显示样式，CSS选择器的种类可以分为三大类：

除了以上的三种基本选择器之外，CSS3又推出很多新的CSS选择器。详见：CSS3新增选择器有哪些？

css选择器种类及优先级顺序

了解了各种选择器后，还有一个重要的知识点就是CSS选择器的优先级。这也是很多学建网站新手迷糊的问题。举个简单的例子：

<div class="polaris">
<span class="beijixing">
beijixing
</span>
<span>
polaris
</span>
</div>

如果已经把.polaris下面span内的字体设置成红色：

.polaris span {color:red;}

这时，如果要改变.beijixing的颜色为蓝色，用下面的命令是不能实现的：

.beijixing {color:blue;}

出现这种情况就是因为后一个命令的优先级不够，两条相互冲突的样式设置，浏览器只会执行优先级较高的那个。

那么选择器的优先级是怎么规定的呢？

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。

比如上例当中 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌：

对于什么情况下使用什么选择器，用不同选择器的原则是：

学习更多网站制作知识，请学习网站制作培训。