一、什么是优先级的权重

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. C# NPOI Export DataTable C# NPOI导出DataTable 单元格自适应大小

    1.Install-Package NPOI -v 2.4.0 2. using NPOI.XSSF; using NPOI.XSSF.UserModel; using NPOI.SS.UserMod ...

  2. 【C#夯实】我与接口二三事：IEnumerable、IQueryable 与 LINQ

    序 学生时期,有过小组作业,当时分工一人做那么两三个页面,然而在前端差不多的时候,我和另一个同学发生了争执.当时用的是简单的三层架构(DLL.BLL.UI),我个人觉得各写各的吧,到时候合并,而他觉得 ...

  3. [基础] - 从xx语言是跨平台的说起

    我经常碰到一些人在说xx语言跨平台而yy语言不是(为避免不必要的纷争,在此不写具体语言但不影响阅读),从而来表明自己使用xx语言进行程序开发进而在编程语言鄙视链上高高在上很有优越感. 大概是从Java ...

  4. MySQL之--修改密码

    1.在Mac上安装MySQL会随机生成一个临时密码,如下: --24T02::.004376Z [Note] A temporary password is generated for root@lo ...

  5. Android Activity之间的数据传递

    1.向目标Activity传递数据: Intent intent=new Intent(this,Main2Activity.class); //可传递多种类型的数据 intent.putExtra( ...

  6. 用构造函数创建对象时，new的行为

    用构造函数创建对象: var obj=new 类型名(属性值,…) new: 4件事: 1. 创建一个空对象 2. 让新的子对象继承构造函数的原型对象设置(自动设置新对象的__proto__属性指向构 ...

  7. 数据挖掘--DBSCAN

    DBSCAN:Density Based Spatial Clustering of Applications with Noise Basic idea: If an object p is den ...

  8. 多任务学习Multi-task-learning MTL

    https://blog.csdn.net/chanbo8205/article/details/84170813 多任务学习(Multitask learning)是迁移学习算法的一种,迁移学习可理 ...

  9. apache主配置文件设置

    主配置文件:httpd.conf #设置管理员邮箱地址ServerAdmin admin@example.com#定义apache安装根目录变量Define SRVROOT "F:\www\ ...

  10. cppcheck代码检测

    cppcheck -hCppcheck - A tool for static C/C++ code analysis Syntax: cppcheck [OPTIONS] [files or pat ...