CSS中选择器优先级顺序实战讲解
|
我是标记选择器 div
|
| <div id=”article”>itdriver.cn</div> |
| <div id=”article” style=””>itdriver.cn</div> |
|
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
|
当我们运行示例的时候，会发现div的背景依然是黄色的，但是我们字体大小是按着#article来设置的(因为行内样式没有设置字体大小)。这就说明： 行内样式 > ID选择器应用的样式。
|
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
|
|
/*给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
CSS中选择器优先级顺序实战讲解相关推荐
- css选择器优先级顺序是什么？css基本选择器优先级的介绍-前端教程
css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容. 在看css选 ...
- css选择器优先级顺序是什么？css基本选择器优先级的介绍
css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容. 打造全网we ...
- CSS选择器优先级顺序是什么
css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容. 在看css选 ...
- 面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际 内容这几个部分 第一种是 W3C 标准的盒子 ...
- 【CSS】选择器优先级
CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...
- css选择器优先级顺序是什么？css基本选择器的介绍
CSS选择器是编写CSS代码时的一个核心概念,我们在设计网页页面时,使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.而HTML页面中的元素就是通过CSS选 ...
- CSS中class优先级问题
CSS中class样式的优先级(或者层叠效果)是根据class在<style>或者css文件中定义的顺序比较,而不是根据class应用的顺序,定义越靠后优先级越高:如 <html&g ...
- css类选择器或逻辑,深入理解CSS中选择器的逻辑处理
在过去的很长一段时间中,我们都说 CSS 是不带有任何逻辑的,意思是在 CSS 中没有控制流,也没有某种类似于其他编程语言的方式来组织 CSS.CSS 天生缺乏逻辑性的问题导致了预处理器的出现.然而业 ...
- css中选择器的使用
css中通过使用选择器,使界面整齐,使代码整洁. 各个选择器的使用代码如下: @CHARSET "UTF-8"; /*使用类选择器*/ .style1{ font-size: 20 ...
最新文章
- （初级）数字信号处理目录（不只是目录）
- XidianOJ 1037 倍流畅序列
- PowerBI随笔(4)-关系模型与报表-1
- 对TELNET登陆路由器的用户进行限制
- tensorflow的tf.transpose()简单使用
- 如何解决CMST_SI_PARTNER_PART_EXEC missing问题
- 表白代码c语言_这段代码怎么啦？居然瞬间引起了所有程序员网友的注意！
- LeetCode （合集）合并链表和数组
- deepin安装windows虚拟机_Deepin Linux V20系统通过安装wine实现运行windows程序
- SQL server脚本语句积累
- 怎样才能打开Tuxera NTFS的主界面？
- Facebook算法swift实现
- 计算机的三种基础运算,计算机基础知识(计算机的基本运算).ppt
- docker build -t myip .报错怎么办？
- Peekaboo—站立式会议+alpha冲刺：Day1冲刺随笔
- 车架号/VIN码识别——图像处理工具
- 中国渠道销售管理模式特点分析
- 拼多多笔试题 回合制角色扮演
- 使用SOLIDWORKS验证光线模拟
- UE4实现多国语言翻译