写给初学者css优先级问题
首先需要搞清楚几个基本概念
1.内嵌样式:
写在元素标签内的例如:<div style="background-color:red"> </div>
2.内联样式:
写在head的style例如:<head>
<style>
div{
background-color:red;
}
</style>
</head>
3.外部样式:
link标签引入进来的例如:<link rel="stylesheet" href="1.css"/>
4.important:只要设置了important的优先级永远最高。例如:border:1px solid red !important;
优先级:!important > 内嵌(标签内)> 内联(style)=外部;
说明:这里很多初学者都会误会内联优先级要高与外部,实际上是相等的。例如:
<head>
<link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}
<style>
div{
background-color;red;
}
</style>
</head>
此时div的背景色为red;
<head>
<style>
div{
background-color;red;
}
</style>
<link rel="stylesheet" href="1.css"/>//名为1的css文件中有div{background:blue;}
</head>
此时div的背景色为blue;
选择器权重值:内嵌:1000;
id:0100;
class或伪类:0010;
元素或伪元素:0001;
*:0000;
说明:权重值越大优先级越高;权重值可以累加,但是不会越位,例如:
嵌套十层div,然后有一个div元素选择器,该选择的权重值为000 10,而不是0010,仍旧比class或伪类选择器的权重值小。
权重值:内嵌(1000)>id(0100)>class/伪类(0010)>元素/伪元素(0001)> * 权重值越高优先级越高。 important永远最高。
写给初学者css优先级问题的更多相关文章
- 使用background和background-image对CSS优先级造成影响
在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- css优先级计算规则
原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...
- html网页的兼容性和css优先级
网页不仅是在一个浏览器上显示的网页,也要多考虑其他浏览器的兼容性,火狐.谷歌.搜狗等浏览器总体来说,网页的变化不大,最主要的是还是IE浏览器. color:red\9; IE6 IE7 IE8 ...
- CSS优先级和定位
overflow属性 hidden scroll auto hidden 超出隐藏 scroll 滚动条 Auto 自动 display属性 block inline inline-block non ...
- 深入理解css优先级
为什么要写这篇文章是因为 <style type="text/css"> body h1 { color: green; } html h1 { color: purp ...
- css优先级机制
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style >(内部样式)Internal style sheet ...
- CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别
在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- CSS优先级的详细解说
一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...
- 【学习笔记】CSS优先级规则
CSS的优先级规则很多地方的说法都是错误的,常见错误说法是inline css>内部样式>外部样式,其实并没有这种规定.真正的CSS优先级确定是通过特性值大小确定的,在特性值大小相同的情况 ...
随机推荐
- P - A + B(第二季水)
Description 读入两个小于100的正整数A和B,计算A+B. 需要注意的是:A和B的每一位数字由对应的英文单词给出. ...
- 深入理解JavaWeb技术内幕(一)
最近在看许令波的<深入理解JavaWeb技术内幕>.整理了一些笔记.想做一个系列,这篇是系列的第一篇,讲Web请求. B/S架构 最常见的架构方式. 优点: 1.客户端使用统一(此处的统一 ...
- 关于ajax发送的数据问题
今天在做保存富文本编辑器的内容时,发送了一个ajax请求: $.ajax({ type:"POST", url:"{% url 'cms:add' %}", d ...
- 国外大神Leo-G的 DevopsWiki
https://raw.githubusercontent.com/Leo-G/DevopsWiki/master/README.md 总结的太好了,直接把md文件贴过来好了!慢慢学习!分享给大家,觉 ...
- 解决function.bind()方法
这个 bind 方法只有在 ie10 版本的浏览器才得到原生支持,低于该版本的浏览器下执行时会得到一个 undefined 的错误提示. 于是只好再次上网 google 解决方案,功夫不负有心人,我们 ...
- Linux文件系统学习笔记-1
在Linux中, 一切皆文件,不论是目录,设备,套接字等都可以看成文件,而且每一个文件对应一个inode号,这是一一对应的关系. [root@oracle ~]# ls -il 总用量 2624 ...
- Storyboard、Nib文件和代码来实现UI的利与弊
很清楚,这就是iOS里面两种可视化UI的方法.加上全部用代码来实现UI,总共有三种方法可以来实现. 我们先说一下全用代码来做,这个方法属于比较极端的程序员所推崇的,优点和缺点同样明显. 优点是可以实现 ...
- 怎么去掉word标题前的黑点
原文地址:http://jingyan.baidu.com/article/9c69d48f593c5b13c9024e2c.html 我们在使用word时,标题前总是出现黑点,其实这个黑点在打印时是 ...
- 如何优化pom依赖项?
Maven工程通过pom.xml里的<dependency>来定义依赖项.当然,我们不会少定义依赖项,否则编译不通过.不过,如果我们多定义了依赖项虽然不会造成灾难,但可能会造成一些问题,比 ...
- poj 1852 Ants_贪心
题目大意:很多的蚂蚁都在长度为L(cm)的膀子上爬行,它们的速度都是1cm/s,到了棒子终端的时候,蚂蚁就会掉下去.如果在爬行途中遇到其他蚂蚁,两只蚂蚁的方向都会逆转.已知蚂蚁在棒子的最初位置坐标,但 ...