内联样式: <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. 小实例 hangman game

    代码 #include <bits/stdc++.h> using namespace std; int bk[110]; string sj(int t) { string ans=&q ...

  2. TensorFlow 学习笔记(2)----placeholder的使用

    此系列将会每日持续更新,欢迎关注 在TensorFlow中输入值的方式是通过placeholder来实现 例如:做两个数的乘法时,是先准备好两个place, 再将输出值定义成两数的乘法 最后利用ses ...

  3. NLTK学习笔记(六):利用机器学习进行文本分类

    目录 一.监督式分类:建立在训练语料基础上的分类 特征提取器和朴素贝叶斯分类器 过拟合:当特征过多 错误分析 二.实例:文本分类和词性标注 文本分类 词性标注:"决策树"分类器 三 ...

  4. Django——6 模型基础ORM 数据库连接配置 模型的创建与映射 数据的增删改查

    Django Django的ORM简介 数据库连接配置 模型的创建与映射 数据库的增删改查 增数据 查数据及补充 改数据 删数据   Django的ORM系统分析 ORM概念:对象关系映射(Objec ...

  5. 【codeforces 527C】Glass Carving

    [题目链接]:http://codeforces.com/contest/527/problem/C [题意] 让你切割一个长方形; 只能横切或竖切; 让你实时输出切完之后最大的长方形的面积; [题解 ...

  6. Maven学习总结(十一)——Maven项目对象模型pom.xml文件详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  7. POJ 1821 Fence

    Fence Time Limit: 1000ms Memory Limit: 30000KB This problem will be judged on PKU. Original ID: 1821 ...

  8. 树网的核(codevs 1167)

    题目描述 Description [问题描述]设 T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T 为树网(treenetwork),其中V, E分别表 ...

  9. OceanBase架构浅析(一)

    简介 OceanBase是阿里集团研发的可扩展的关系数据库,实现了数千亿条记录.数百TB数据上的跨行跨表事务,截止到2012年8月,支持了收藏夹.直通车报表.天猫评价等OLTP和OLAP在线业务,线上 ...

  10. 洛谷——P2676 超级书架

    https://www.luogu.org/problem/show?pid=2676#sub 题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎 ...