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

CSS选择器种类

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

• 标签名选择器
• 类选择器
• ID选择器

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

css选择器优先级顺序

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

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

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

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

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

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

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

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

• div.test1?.span?var?优先级?1+10?+10?+1
• span#xxx?.songs?li?优先级1+100?+?10?+?1
• #xxx?li?优先级?100?+1

CSS选择器的使用原则

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

• 第一：准确的选到要控制的标签；
• 第二：使用最合理优先级的选择器；
• 第三：HTML和CSS代码尽量简洁美观。

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

相关知识

• jQuery class选择器
  (11082 次阅读)
• jQuery 元素选择器
  (11174 次阅读)
• jQuery ID选择器
  (11277 次阅读)
• 第4节：CSS选择器类型和样式
  (15508 次阅读)
• css3学习参考手册
  (1585 次阅读)

标签： 代码 建网站 网站制作 学建网站

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。