学做网站培训课程介绍

当前位置:

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

CSS选择器种类

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

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

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

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

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;浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌:

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

CSS选择器的使用原则

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

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

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

相关知识

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 对于有条件的学员,在做网站的时候,可以选择服务器来存储自己网站的内容,这样打开速度快,反应敏捷。对于网站服务器来说,一般空间商会按照其性
  • 对于学建网站,首先必须有自己的网站域名,如何选择适合自己的网站域名呢?【相关教程:如何购买域名和空间】选择域名三要素: 域名要简单、
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS选择器类型和样式。什么是CSS选择器每一条css样式定义由两部分组成,形式如下:
  • CSS选择器种类在网页设计和网站制作过程中,会使用CSS来控制网页的显示样式,CSS选择器的种类可以分为三大类: 标签名选择器 类选择器 ID选
  • 网站域名是我们做网站必要的元素,网站域名可以分为很多种类,你知道在哪些种类吗?
  • css样式书写顺序 图文教程 (115984 次浏览)
    在自己建网站时,我使用使用CSS样式来控制HTML的显示样式。css样式中有很多的样式属性,在书写css样式时,需要按照一定的Web前端开发规范进行书写,有