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

简介: 原文:CSS中选择器优先级顺序实战讲解我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也遇到同样的问题,即在给某一元素应用样式的时候(比如写在外部样式表中),写在后面的样式不能覆盖前面定义的样式。
原文: 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

目录
相关文章
|
1天前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
12天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
11 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
13天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
18 0
CSS 【实战】 “四合院”布局
|
20天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
16 4
|
10天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
14 0
|
12天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
19 0
|
12天前
|
前端开发 JavaScript
CSS【实战】抽屉动画
CSS【实战】抽屉动画
12 0
|
14天前
|
前端开发
css实战——清除列表中最后一个元素的下边距
css实战——清除列表中最后一个元素的下边距
16 0
|
16天前
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
30 0
|
16天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
15 0