零基础建站培训教程介绍

当前位置:

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

CSS选择器种类

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

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

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

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

css选择器优先级顺序

了解了各种选择器后,还有一个重要的知识点就是CSS选择器的优先级。这也是很多学建网站新?#32622;?#31946;的问题。举个简单的例子:

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

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

.polaris span {color:red;}

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

.beijixing {color:blue;}

出现这种情况就是因为后一个命令的优先级?#36824;唬教?#30456;互冲突的样式设置,浏览器只会执行优先级较高的那个。

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

一般而言,选择器?#25945;?#27530;,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。

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

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

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

CSS选择器的使用原则

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

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

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

相关知识

发表评论

电子邮件地址不会?#36824;?#24320;。 必填项已用*标注

相关教程

学做网站论坛零基础学建网站课程
速盈彩1分快三
超神计划软件官网 有啊彩票中奖助手 开乐彩玩法 3d和值尾走势图 广西今天快三开奖 今日广西快双彩走势图 福利彩票2019032期 北京快三走势图一定牛 新浪竞彩足球比分直播 大彩网 金鹰娱乐是正规的吗 如何提高福彩中奖概率 欢乐斗地主为什么钱冲了不给欢乐豆 江苏e球开奖结果 海南环岛赛下载