1. <!--
  2. 权重问题整体说明：
  3. 1.权重的意义：判定CSS属性的优先级高低，也就是说判定那个CSS的属性优先显示，将其他的低优先级的CSS样式覆盖掉。
  4. 2.如何判断权重：数选择器的数量，按照Id选择器、类选择器、标签选择器进行展示（注意：不进位），结果大的优先级高，
  5.     如：id选择器的个数为5，类选择器为8，标签选择器为6，则该样式的权重为586，如果另一个样式的权重为468，则第一个
  6.     样式的权重大，优先展示第一个CSS样式
  7. 3.权重的原则
  8.     （1）前提是选中标签,看权重,权重大的优先级要高,如果权重一样大,后面会覆盖掉前面的属性
  9.     （2）继承来属性 它们的权重为0,跟选中的标签没有可比性
  10.     （3）同是继承来的,谁描述的越近,谁的优先级要高."就近(选中标签)原则"
  11.     （4）同是继承来的,谁描述的一样近,再回到数权重的状态
  12.  
  13. -->
  14. <!DOCTYPE html>
  15. <html lang="zh-CN">
  16. <head>
  17.     <meta charset="UTF-8">
  18.     <title>权重问题</title>
  19.     <style>
  20.         /* 112 选择器的数量 id class 标签选择器 */
  21.         #wrap div .box3 p{
  22.            color: red;
  23.         }
  24.         /* 031 选择器的数量 id class 标签选择器 */
  25.         .box .box2 .box3 p{
  26.             color: green;
  27.         }
  28.         /* 201 选择器的数量 id class 标签选择器 */
  29.         #wrap #wrap2 p{
  30.             color: deeppink;
  31.         }
  32.         /* 201 > 112 > 031，所以字体显示显示为deeppink */
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="box" id="wrap">
  37.         <div class="box2" id="wrap2">
  38.             <div class="box3" id="wrap3">
  39.                 <p>马玉刚</p>
  40.             </div>
  41.         </div>
  42.     </div>
  43. </body>
  44. </html>

13 CSS样式权重问题的更多相关文章

  1. CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  2. CSS样式权重的级联cascade的概念

    我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以 ...

  3. css样式权重优先级，css样式优先级

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

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

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

  5. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  6. 从webkit内核简单看css样式和css规则优先级(权重)

    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...

  7. CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

    CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...

  8. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  9. 从零开始学习html（七）CSS样式基本知识

    一.内联式css样式,直接写在现有的HTML标签中 <!DOCTYPE HTML> <html> <head> <meta http-equiv=" ...

随机推荐

  1. CUDA多个流的使用

    CUDA中使用多个流并行执行数据复制和核函数运算可以进一步提高计算性能.以下程序使用2个流执行运算: #include "cuda_runtime.h" #include < ...

  2. Java -Android 得知（第四天）

    添加一个新的Activity    我们已经了解到一个Activity就相当于是一个界面(当然了.这样说并不严格,但易于理解). 当我们创建一个安卓应用程序之后.就默认创建了: ①.一个继承Activ ...

  3. 《Planet Earth II》观看笔记

    carrion:n. 腐肉:臭尸:不洁之物 cub:n. 幼兽:不懂规矩的年轻人:chick; n. 小鸡:小鸟:少妇 herd:兽群: 1. 高频单词 terrain:n. [地理] 地形,地势:领 ...

  4. ATS项目更新(3) 远程同步到执行机器

    1: echo %time% 2: 3: 4: rem ** ipc and mapping 5: c: 6: net use x: /del 7: net use y: /del 8: net us ...

  5. 用户控件(UserControl)

    简介 "用户控件"继承自UserControl,而UserControl继承自ContentControl,也就是内容控件UserControl和Window是一个层次上的,都有x ...

  6. WPF 数据模板的使用

    <Window x:Class="CollectionBinding.MainWindow"        xmlns="http://schemas.micros ...

  7. IDEA 自动化配置

    # IDEA maven web项目:http://www.cnblogs.com/Sinte-Beuve/p/5730553.html # IDEA 数据库自动化 ## 功能 ① SQL 代码自动感 ...

  8. C# WindowsPrincipal(Windows规则)的使用

    using System;using System.Collections.Generic;using System.Linq;using System.Security.Principal;usin ...

  9. seajs教程（一）：基本用法

    介绍 SeaJS 是一个适用于 Web 浏览器端的模块加载器.使用 SeaJS,可以更好地组织 JavaScript 代码. Sea.js 遵循 CMD 规范,模块化JS代码.依赖的自动加载.配置的简 ...

  10. 动态lambda 构建

    var param = Expression.Parameter(typeof(T)); var datetime1 = Expression.Constant(dt1); var datetime2 ...