内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet)
例外:但如果外部样式表放在内部样式表下边引用,则外部样式表>内部样式表;

1,内联样式表 的权值为1000;
2,ID选择器 的权值为100;
3,Class类选择器,伪类选择器 的权值为10;
4,HTML标签选择器,伪元素 的权值为1;

PS： 伪类-有6个——:link、:visited、:hover、:active、:focus、:first-child
       伪元素-有4个——:before、:after、:first-line、:first-letter

具体代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS样式权值</title>

    <style>

        body{

            font-size: 20px;

            font-weight: 900;

        }

        h3{

            color: yellow;

        }

        #redP p{

            /*权值100+1=101*/

            color: #f00;

            /*红色*/

        }

        #redP p.red em{

            /*权值100+1+10+1=112*/

            color: #00f;

            /*蓝色*/

        }

        #redP .red em{

            /*权值100+10+1=111*/

            color: #0ff;

            /*亮蓝色*/

        }

        #redP p span em{

            /*权值100+1+1+1=103*/

            color: #ff0;

            /*黄色*/

        }

    </style>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h3>例外:外部样式表>内部样式表</h3>

    <div id="redP">

        <p class="red">

            <span>

                <em>emred</em>

            </span>

        </p>

        <p>red</p>

    </div>

</body>

</html>

CSS样式权值的更多相关文章

  1. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  2. css选择器权值

    有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p clas ...

  3. 记录：CSS特殊性——权值规则

    浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:r ...

  4. 【转】CSS样式覆盖规则

    大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义.其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值, ...

  5. CSS样式的优先级

    1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...

  6. CSS样式覆盖规则

    有一下问题, 想让下面的border生效 ,#比. 优先级高, #navigator { height: 100%; width: 200; position: absolute; left: 0; ...

  7. CSS样式:覆盖规则

    规则一:由于继承而发生样式冲突时,最近祖先获胜. CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况: <html> <head> <title& ...

  8. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  9. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

随机推荐

  1. BZOJ 1026 windy数

    Description windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数? In ...

  2. C#与C++、Java之比较概览

    转自C#与C++.Java之比较概览 C#与C++.Java之比较概览 Ben Albahari 著  荣耀 译 本文翻译时间较早.欢迎指出任何误失.谢谢. 感谢以下人士的支持和反馈(按字母先后顺序) ...

  3. gcc c语言中scanf输入格式不正确，清空缓冲区问题

    我的博客:www.while0.com 折磨了一下午,只因为fflush(stdin)再gcc里和vc里表现不一致.gcc里不能够清空缓冲区.直接上例子: #include <stdio.h&g ...

  4. 进程创建函数fork()、vfork() ,以及excel()函数

    一.进程的创建步骤以及创建函数的介绍 1.使用fork()或者vfork()函数创建新的进程 2.条用exec函数族修改创建的进程.使用fork()创建出来的进程是当前进程的完全复制,然而我们创建进程 ...

  5. Delphi webservice 定义 转

    webservice   Web Services是由企业发布的完成其特定商务需求的在线应用服务,其他公司或应用软件能够通过Internet来访问并使用这项在线服务. 简介 它是一种构建应用程序的普遍 ...

  6. robotium源码方法备注---clicker.java

    1.clickOnScreen(float x,float y) 在屏幕上点击一个指定的区域(x,y)横纵坐标 2.clickLongOnScreen(float x,float y, int tim ...

  7. java 泛型学习

    http://blog.csdn.net/archie2010/article/details/6232228 学习集合框架的时候经常用hasmap<Integer,Integer>就是泛 ...

  8. UVa 10917 A Walk Through the Forest

    A Walk Through the Forest Time Limit:1000MS  Memory Limit:65536K Total Submit:48 Accepted:15 Descrip ...

  9. 关于Marsedit和我的163博客

    其实我一开始选择的并不是163的博客,感觉没什么新意,勾不起我的兴趣. 第一个我想写的是CSDN的博客,代码嘛,总要找个专业的网站来写,但是我发现了一个及其让我不爽的事情,我竟然在网页上无法新建一篇日 ...

  10. OpenStack Havana 部署在Ubuntu 12.04 Server 【OVS+GRE】（二）——网络节点的安装

    序:OpenStack Havana 部署在Ubuntu 12.04 Server [OVS+GRE] 网络节点: 1.安装前更新系统 安装好ubuntu 12.04 Server 64bits后,进 ...