CSS样式优先级和权重问题(部分)
内联样式: <div style="font-size: 12px;">姓名</div>
外部样式: <link rel="stylesheet" href="css/bootstrap.min.css" />
内嵌样式 : <style>
.name{
font-size: 12px;;
}
</style>
jquery书写样式:$('#name').css('font-size','12px');
id选择器: <div id="name">姓名</div>
class选择器:<div class="name">姓名</div>
一般情况下,优先级问题:
jquery书写样式 > 内联样式 > 外部样式;
id选择器 > class选择器 ; id一般作为数据传输,样式的话尽量使用class;
在html页面中,程序是自上至下执行的,执行晚的优先级高,如果外部样式先执行,内嵌样式后执行,则内嵌样式 > 外部样式
权重问题:
元素,伪元素: +1 p{font-size:12px;} 直接写p标签的样式
类,伪类,属性: +10 class选择器
ID: +100 id选择器
内联样式: +1000 内联样式
用代码(js,jquery)书写的样式: +较高 $('#name').css('font-size','12px');
!important : +最高 p{font-size: 20px !important;};
例如以下样式:
p {} p为元素 总权重就是:1
div p{} p与div都是元素 总权重是:1=1=2
.div p{} .div是类,p是元素 总权重是:10+1=11
.div .class_p{} .div是类 .class_p是p元素的class 总权重是:10+10=20
先写这么多!
!important : 这个较为特殊,只要写在样式后边 font-size: 20px !important; 那这个样式的权重最高。
感谢yy_68的指正~
CSS样式优先级和权重问题(部分)的更多相关文章
- css样式优先级和权重问题
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- css样式权重优先级,css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
- css样式优先级问题
官方表述的CSS样式优先级如下: 通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 那么,我们来举个 ...
- css的优先级 和 权重问题 以及 !important 优先级
css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...
- CSS 样式优先级
首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...
- CSS样式优先级
关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...
- 强制改变css样式优先级
.list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...
- 权重和层叠规则决定了CSS样式优先级
一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...
- 关于css里决定样式优先级的权重
最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...
随机推荐
- linux 的sed命令解释 sed ':t;N;s/\n/,/;b t' 将换行符换成逗号
linux 的sed命令解释 sed ':t;N;s/\n/,/;b t' 将换行符换成逗号 实现的功能是吧换行符换成逗号了,自己试验过. 求解释,:t N b t 都是什么意思??? :t 定义la ...
- PAT 1093. Count PAT's
The string APPAPT contains two PAT's as substrings. The first one is formed by the 2nd, the 4th, and ...
- 【Codeforces 1106E】Lunar New Year and Red Envelopes
[链接] 我是链接,点我呀:) [题意] 给你k个红包,每个红包可以在si..ti的时间范围内拿走. 抢完红包之后你得到wi元,然后你需要在di+1时刻才能继续抢红包 时间是线性的从1..n 然后某个 ...
- 1、ceph-deploy之部署ceph集群
环境说明 server:3台虚拟机,挂载卷/dev/vdb 10G 系统:centos7.2 ceph版本:luminous repo: 公网-http://download.ceph.com,htt ...
- 如何修改cnblogs的文本编辑器
我发现从别处复制过来的文本,文字上下间隔太大,所以我点击“html”标签,然后,把html内容复杂到记事本里,用记事本替换的功能,把“<p>”替换为“<p style="p ...
- [POJ1226]Substrings(后缀数组)
传送门 给定 n 个字符串,求出现或反转后出现在每个字符串中的最长子串. 算法分析: 这题不同的地方在于要判断是否在反转后的字符串中出现.其实这并没有加大题目的难度. 只需要先将每个字符串都反过来写一 ...
- myeclipse git 上下箭头表示什么
myeclipse git 上下箭头表示什么? 向上箭头表示本地有提交(commit),但是还没有推(push)到远程代码库中,旁边的数字表示本地commit的次数: 向下箭头表示你拉(fetch)下 ...
- Struts2—Action
二.命名空间namespace ·命名空间namespace须要放在相应的package下 ·Namespace必须以"/开头". ·Result的name是"succe ...
- Notepad++支持jQuery、html5、css3
Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...
- cocos2d-x 3.0游戏实例学习笔记 《跑酷》第七步--物理碰撞检測(1)
说明:这里是借鉴:晓风残月前辈的博客,他是将泰然网的跑酷教程,用cocos2d-x 2.X 版本号重写的,眼下我正在学习cocos2d-X3.0 于是就用cocos2d-X 3.0重写,并做相关笔记 ...