一、什么是优先级的权重

1.作用：当多个选择器混合在一起的时候，我们可以通过计算权重来判断谁的优先级最高。

2.权重的计算规则

公共代码：

<body>

<div id="identity1" class="box1">

    <ul>

        <li>

            <p id="identity2" class="box2">试炼语句</p>

        </li>

    </ul>

</div>

</body>

（1）首先计算选择器中有多少个id，id多的选择器优先级最高；

例子：

        #identity1 .box2{

            color: red;

        }

        .box1 .box2{

            color: blue;

        }

（2）如果id选择器同样多，那么类选择器多的优先级高

       .box1 .box2{

            color: blue;

        }

        div ul li p{

            color: purple;

        }

（3）如果类名的个数也一样多，那么标签个数多的个数多的优先级高

        #identity1 ul{

            color: red;

        }

        #identity1 ul li p{

            color: purple;

        }

（4）如果上述三条全都一样，那么谁在后面听谁的

        #identity1 ul li{

            color: blue;

        }

        #identity1 ul p{

            color: red;

        }

3.注意：只有选择器是直接选中标签的才需要计算

        #identity1{

            color: blue;

        }

        p{

            color: red;

        }

二、源码：

d88&89_the_weiht_of_selector.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d88%2689_the_weiht_of_selector.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载28-标签的权重的更多相关文章

  1. HTML标签的权重

    原文 简书原文:https://www.jianshu.com/p/c86d540aec40 大纲 1.HTML权重标签 2.常见的权重标签 3.常见的权重标签的使用 1.HTML权重标签 SEOer ...

  2. HTML连载9-video标签的第二种格式&audio标签

    一.video第二种格式 1.背景:由于视频数据非常重要,所以五大浏览器厂商都不愿意支持别人的视频格式,所以导致了没有一种视频格式是所有浏览器都支持的.这个时候W3C为了解决这个问题,所以推出了第二种 ...

  3. HTML连载10-details标签&summary标签&marquee标签

    ​1.详情(details)与概要(summary)标签 (1)作用:我们希望用尽可能少的空间来表达更多的信息,利用summary标签来描述概要信息,用details标签来描述详情信息 (2)格式: ...

  4. HTML连载8-video标签

    ​一.video标签 1.作用:播放视频 2.格式:<video src="视频地址“></video> 3.可添加的属性: (1)autoplay="au ...

  5. HTML连载64-a标签伪类选择器的注意点与练习

    一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...

  6. HTML连载63-a标签的伪类选择器

    一.a标签的伪类选择器 1.通过观察可以发现a标签存在一定状态 (1)默认状态,从未被访问过 (2)被访问过的状态 (3)鼠标长按的状态 (4)鼠标悬停在a标签上的演示 2.什么是a标签的伪类选择器? ...

  7. html标签SEO规范

    原文地址:http://blog.sina.com.cn/s/blog_6c3898dd0100whr7.html 1.<!--页面注解--> 2.<html> 3.<h ...

  8. h1、h2、h3标签及strong标签对页面seo的影响

    今天和大家来聊下h1,h2,h3,strong几个标签,在网页中的使用对页面seo的影响,也阐述了个人的一些想法. 首先简要讲下H标签及strong标签的含义:<h1>.<h2> ...

  9. jsp简单标签开发(一)

    孤傲苍狼 @Override22 public void doTag() throws JspException, IOException {23 //得到代表jsp标签体的JspFragment24 ...

随机推荐

  1. ADO.NET中的5个主要对象

    1.Connection:主要是开启程序和数据库之间的连接.没有利用连接对象将数据库打开,是无法从数据库中取得数据的. Close和Dispose的区别,Close以后还可以Open,Dispose以 ...

  2. Java编程基础——流程控制

    Java编程基础——流程控制 摘要:本文主要介绍Java编程中的流程控制语句. 分类 流程控制指的是在程序运行的过程中控制程序运行走向的方式.主要分为以下三种: 顺序结构:从上到下依次执行每条语句操作 ...

  3. Valgrind调试

    Valgrind的最初作者是Julian Seward,他于2006年由于在开发Valgrind上的工作获得了第二届Google-O'Reilly开源代码奖 摘自 Valgrind.org: Valg ...

  4. vue学习指南：第四篇(详细) - vue的 :class 和 :style

    1. :class = “a” 说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值 2. :class = “{ active:isactive }” Active的存在取决于 i ...

  5. Hive：数据倾斜

    数据倾斜问题 数据倾斜是大数据领域绕不开的拦路虎,当你所需处理的数据量到达了上亿甚至是千亿条的时候,数据倾斜将是横在你面前一道巨大的坎.很可能有几周甚至几月都要头疼于数据倾斜导致的各类诡异的问题. 数 ...

  6. X264-libx264编码库

    X264编码库libx264实现真正的视频编解码,该编解码算法是基于块的混合编码技术,即帧内/帧间预测,然后对预测值变换.量化,最后熵编码所得. 编码帧的类型分为I帧(x264_type_i).P帧( ...

  7. visual studio之X64调试问题

    这个问题没有解决. 只能X86啦!

  8. fd （int)读写文件

    #include <string.h> #include <stdio.h> #include <fcntl.h> int main() { char *p1 = ...

  9. Python成绩单雷达图

    1numpy库 numpy 是 python 的科学计算库 部分功能: 1.使用numpy读取txt文件 # dtype = "str":指定数据格式 # delimiter = ...

  10. 洛谷 P1628 合并序列

    洛谷 P1628 合并序列 题目传送门 题目描述 有N个单词和字符串T,按字典序输出以字符串T为前缀的所有单词. 输入格式 输入文件第一行包含一个正整数N: 接下来N行,每行一个单词,长度不超过100 ...