零基础建站培训教程介绍

当前位置:

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分快三
广西快3开奖查询 新疆十一选五手机版 排球的英语读音 35选7开奖结果全国 广东11选5杀一码技巧 黄大仙二肖中特图 海南4+1开奖公告 江苏7位数怎么看中没中 篮彩胜分差投注心得 2019海南环岛赛 福彩安徽时时彩 浙江快乐彩app下载 彩票双色球2019098 时时彩开奖视频 江苏十一选五开奖结果走势图任选走势图