28-优先级之权重问题


  • 我是段落

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>28-优先级之权重问题</title>
  6.     <style>
  7.         /*
  8.         #identity1 .box2{
  9.             color: red;
  10.         }
  11.         .box1 .box2{
  12.             color: green;
  13.         }
  14.         div ul li p{
  15.             color: blue;
  16.         }
  17.         */
  18.         /*
  19.         .box1 .box2{
  20.             color: blue;
  21.         }
  22.         div .box2{
  23.             color: green;
  24.         }
  25.         */
  26.         /*
  27.         #identity1 ul li p{
  28.             color: red;
  29.         }
  30.         #identity1 ul p{
  31.             color: green;
  32.         }
  33.         */
  34.         /*
  35.         .box1 li #identity2{
  36.             color: blue;
  37.         }
  38.  
  39.         #identity1 ul .box2{
  40.             color: red;
  41.         }
  42.         */
  43.  
  44.         .box2{
  45.             color: red;
  46.         }
  47.         li{
  48.             color: blue;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53. <!--
  54. 1.什么是优先级的权重?
  55. 作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
  56.  
  57. 2.权重的计算规则
  58. 2.1首先先计算选择器中有多少个id, id多的选择器优先级最高
  59. 2.2如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
  60. 2.3如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
  61. 2.4如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
  62. 也就是说优先级如果一样, 那么谁写在后面听谁的
  63.  
  64. 注意点:
  65. 1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
  66. -->
  67.  
  68. <div id="identity1" class="box1">
  69.     <ul>
  70.         <li>
  71.             <p id="identity2" class="box2">我是段落</p>
  72.         </li>
  73.     </ul>
  74. </div>
  75. </body>
  76. </html>

H5 28-优先级之权重问题的更多相关文章

  1. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

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

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

  3. CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

    1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

  4. css的优先级 和 权重

    之前写页面样式时,有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候,当时想到的就是  按css选择器的优先级来搞定这个问题,说实话当时也就只记得 内嵌样式 > id > cla ...

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

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

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

    一,前言: 刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题.那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规 ...

  7. CSS样式优先级和权重问题（部分）

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

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

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

  9. CSS（二）- 选择器 - 一定要搞懂的选择器优先级和权重问题

    css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛.直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中 ...

  10. css优先级和权重

    1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...

随机推荐

  1. ORACLE归档日志比联机重做日志小很多的情况总结

    ORACLE归档日志比联机重做日志小很多的情况   前几天一网友在群里反馈他遇到归档日志比联机重做日志(redo log)小很多的情况,个人第一次遇到这种情况,非常感兴趣,于是在一番交流沟通后,终于弄 ...

  2. 自动化测试基础篇--Selenium判断元素是够存在

    摘自https://www.cnblogs.com/sanzangTst/p/8376101.html selenium+python处于学习阶段,功能实现之后开始整理之前写的代码,突然发现一个功能没 ...

  3. 【PAT】B1012 数字分类

    注意逻辑的描述,只要认真看题,就能做对,如果自己结果一直不正确,请仔细推一下样例结果 #include<stdio.h> int arr[1005]; int main(){ int N, ...

  4. vue-cli笔记

    总是忘,留个笔记. vue-cli A simple CLI for scaffolding Vue.js projects. Installation Prerequisites: Node.js ...

  5. Spring Data JPA 简单查询--方法定义规则

    一.常用规则速查 1  And 并且2  Or  或3  Is,Equals 等于4  Between  两者之间5  LessThan 小于6  LessThanEqual   小于等于7  Gre ...

  6. 前端性能优化成神之路--vue组件懒加载（Vue Lazy Component ）

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  7. WinForm下的loading框的实现

    前言:在项目使用C/S模式情况下,由于需要经常进行数据的刷新,如果直接进行刷新,会有一个等待控件重画的过程,非常的不友好,因此在这里添加一个loading框进行等待显示. 实现:在经过多方面查询资料, ...

  8. Django-rest-framework 接口实现 Serializer 使用

    Django接口实现 DRF 使用 以下模块 实现 json数据 序列化 博客: https://www.cnblogs.com/liwenzhou/p/9959979.html Django RES ...

  9. angularjs处理/n转<br/>时候 <br/>不会解析的问题

    $scope.name=$sce.trustAsHtml($scope.name); <p ng-bind-html="name"></p>  

  10. 微信硬件平台（七）微信开发--如何存储并定时更新access_token

    https://blog.csdn.net/sct_t/article/details/53002611 我们知道请求access_Token会返回这样一个json,包括access_token(凭证 ...