内联样式: <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样式优先级和权重问题(部分)的更多相关文章

  1. css样式优先级和权重问题

    内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...

  2. css样式权重优先级,css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

  3. css样式优先级问题

    官方表述的CSS样式优先级如下: 通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 那么,我们来举个 ...

  4. css的优先级 和 权重问题 以及 !important 优先级

    css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...

  5. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  6. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

  7. 强制改变css样式优先级

    .list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...

  8. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  9. 关于css里决定样式优先级的权重

    最近学css样式,优先级有点繁琐,简单记录一下. css中的优先级规则为: 有!important的最优先: 其次权重高的优先: 权重相同则后定义优先,会覆盖前面的. 至于权重: #id 为100: ...

随机推荐

  1. linux 的sed命令解释 sed ':t;N;s/\n/,/;b t' 将换行符换成逗号

    linux 的sed命令解释 sed ':t;N;s/\n/,/;b t' 将换行符换成逗号 实现的功能是吧换行符换成逗号了,自己试验过. 求解释,:t N b t 都是什么意思??? :t 定义la ...

  2. 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 ...

  3. 【Codeforces 1106E】Lunar New Year and Red Envelopes

    [链接] 我是链接,点我呀:) [题意] 给你k个红包,每个红包可以在si..ti的时间范围内拿走. 抢完红包之后你得到wi元,然后你需要在di+1时刻才能继续抢红包 时间是线性的从1..n 然后某个 ...

  4. 1、ceph-deploy之部署ceph集群

    环境说明 server:3台虚拟机,挂载卷/dev/vdb 10G 系统:centos7.2 ceph版本:luminous repo: 公网-http://download.ceph.com,htt ...

  5. 如何修改cnblogs的文本编辑器

    我发现从别处复制过来的文本,文字上下间隔太大,所以我点击“html”标签,然后,把html内容复杂到记事本里,用记事本替换的功能,把“<p>”替换为“<p style="p ...

  6. [POJ1226]Substrings(后缀数组)

    传送门 给定 n 个字符串,求出现或反转后出现在每个字符串中的最长子串. 算法分析: 这题不同的地方在于要判断是否在反转后的字符串中出现.其实这并没有加大题目的难度. 只需要先将每个字符串都反过来写一 ...

  7. myeclipse git 上下箭头表示什么

    myeclipse git 上下箭头表示什么? 向上箭头表示本地有提交(commit),但是还没有推(push)到远程代码库中,旁边的数字表示本地commit的次数: 向下箭头表示你拉(fetch)下 ...

  8. Struts2—Action

    二.命名空间namespace ·命名空间namespace须要放在相应的package下 ·Namespace必须以"/开头". ·Result的name是"succe ...

  9. Notepad++支持jQuery、html5、css3

    Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...

  10. cocos2d-x 3.0游戏实例学习笔记 《跑酷》第七步--物理碰撞检測(1)

    说明:这里是借鉴:晓风残月前辈的博客,他是将泰然网的跑酷教程,用cocos2d-x 2.X 版本号重写的,眼下我正在学习cocos2d-X3.0 于是就用cocos2d-X 3.0重写,并做相关笔记 ...