CSS中选择器优先级顺序实战讲解

我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗?

如果你在开发中也遇到同样的问题,即在给某一元素应用样式的时候(比如写在外部样式表中),写在后面的样式不能覆盖前面定义的样式。这个时候,你可能就得考虑是不是没考虑优先级问题了。

当我们在给一个标签,比如div应用样式的时候,我们得考虑优先级问题。

下面列出的就是是选择器的优先级:

行内样式 > ID选择器样式 > 类别选择器样式 > 标记选择器样式

标记选择器好比一个更广泛的概念,然后到类别选择器,到ID选择器,最后到行内样式,不断的精确下去,所以越精确,优先级越高。比如下面的盒子模型:


我是标记选择器 div


我是类别选择器 .container


我是ID选择器 #article

我是行内样式 style

下面我对上面这些优先级分别作一下证明:

比如页面中有一个div标签,它有相应的id和class属性,如下所示

<div id=”article”>itdriver.cn</div>

现在我们先给它应用行内样式。

行内样式 : 也即直接应用在元素上的样式。 如 <div style=”</div>。 这个style属性其实就是行内样式。

<div id=”article” style=””>itdriver.cn</div>

这时我们的div背景就变成了黄色了。

接着我们再通过ID选择器来设置div的样式。

ID选择器:所谓ID选择器,就是我们在样式表中,通过一个#id来给元素直接应用样式,大家请看下面的代码,就是如何给一个指定ID的元素应用样式;


/*给id为article的标签应用样式 */

#article{

font-size: 0.8em;

float:right;

}

当我们运行示例的时候,会发现div的背景依然是黄色的,但是我们字体大小是按着#article来设置的(因为行内样式没有设置字体大小)。这就说明: 行内样式 > ID选择器应用的样式

接着ID选择器的下面,我们应用class选择器样式


/*给id为article的标签应用样式 */

#article{

font-size: 0.8em;

float:right;

}

/*给所有指定container为class的标签应用样式*/

.container{

font-size: 0.5em;

border:1px solid red;

}

这是我们发现,除了给div加了个黄色边框,div的背景色依然是行内样式设置的黄色,字体大小是#article里设置的。由此我们可以发现,虽然.container写在#article下面,但是却没有覆盖已经定义过的样式,这就证明了:行内样式 > ID选择器样式 > 类选择器样式

最后再应用一个标记选择器样式


/*给id为article的标签应用样式 */

#article{

font-size: 0.8em;

float:right;

}

/*给所有指定container为class的标签应用样式*/

.container{

font-size: 0.5em;

border:1px solid red;

}

div{

font-size:1em;

border:2px solid black;

color:green;

}

我们会发现,只有字体的颜色发生了变化,其他的样式还是之前的样式,这就说明标记选择器没有覆盖前面类选择器,ID选择器以及行内已定义的样式。这也就证明了 : 行内样式 >ID选择器 > 类选择器 > 标记选择器.

 

转载自实战互联网:http://www.itdriver.cn/html/2014/08/03/9.html

时间: 2024-10-09 10:31:27

CSS中选择器优先级顺序实战讲解的相关文章

CSS中选择器优先级的权重计算

CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color: gold; } .box a{ color: brown; } p a{ color: yellow; } </style> <p id='box' class="box"> <a>hello</a></p> 请问上面代码中,

CSS中选择器优先级与!important权重使用

原文:CSS中选择器优先级与!important权重使用 CSS中的选择器优先级与!important权重使用# .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重值优先级最高的,大于所有的选择器. 标签选择器和.class选择器# 让我们进入标签选择器和.class选择器谁的优先级高实践,实践内容如:将HTML页面中的h2标签设置文本颜色. 代码块 Copy <!DOCTYPE html> <

css中选择器优先级问题详解

先根据引入方式分:内联样式,头部样式,外部引入:这三个的优先级依次降低: 相同的引入方式时,根据选择器优先级判断显示哪个样式,具体规则如下: 将选择器的特殊性分为4个等级,a,b,c,d 行内样式,a=1 b 是ID选择器的总数 c 是类,伪类,属性选择器的总数 d 是元素(类型),伪元素选择器的总数 举例说明:   选择器 特殊性 以10为基准的特殊性 1 style="" 1,0,0,0 1000 2 #id01 #id02{} 0,2,0,0 200 3 #id .class{}

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

CSS样式选择器优先级

原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如: 选择器 特殊性 (a,b,c,d) Style= ”” 1,

css中选择器的使用

css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻为树干的时候,css比喻为叶子,花.那要控制这些样式,则要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.HTML页面中的元素就是通过CSS选择器进行控制的. css的选择器可分为:1.id选择器:2.class类别选择器:3.元素选择器:4.属性选择器

[ css 补充 vertical-align ] css中补充的vertical-align属性讲解

一.关于今天,本文,及其他 今天是个特殊的日子,因为今天是汶川地震两周年的日子,我很悲鸣:今天又是国际护士节,看到微博上护士照横流,我很欣慰. 一段放松的YY后,进入正题.上个月21号,有位同行留言想让我讲讲vertical-align属性,我其实对vertical-align属性也是略知皮毛,要说岂敢谈“讲解”,就说说我对vertical-align属性的一些理解吧,纯属个人见解,若有不准确之处还望见谅.还有,vertical-align属性牵扯到的知识实在是太多了,不是一篇文章就可以讲清楚的

xaml与CSS中的Margin顺序不同

XAML中  Margin:左 上 右 下 CSS中      Margin:上 右 下 左

有关css的选择器优先级以及父子选择器

css,又称样式重叠表,如今的网页的样式基本是div+css写出来的,功能十分强大,要想在html文件中引入css文件需要在<head></head>标签内输入一行:<link  rel=" stylesheet "  type=" text/css "  href=" XXX.css "> css的一些基本样式也不一 一做介绍了,这个在手册以及一些学习网站上都会有,大家可以自行查阅: css中有四种不同的选择