一、什么是优先级的权重

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. Docker入门学习及其安装

    1.Docker是一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源.Docker可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的Linux机器 ...

  2. open*** 搭建

    pptp 互联网上服务商给拦截.不稳定. opevpn 1.为了保证OpenVPN的安装,需要使用easy-rsa秘钥生成工具生成证书 [root@m01 ~]# yum install easy-r ...

  3. css中的baseline

    这是css中的一个容易被人忽略的概念,今天在知乎上看到一个问题,这个问题应该是关于baseline,才去补习了一下关于baseline的知识,首先我来还原一下问题: <div style=&qu ...

  4. wpf 代码设置图片路径（后台和xamll）

    项目中经常使用背景图片,当一个小组共通开发时,路径的选择应该是在项目运行的固定文件夹下 此时,可用代码实现:pack://SiteOfOrigin:,,,/Images/Icons/HomePageB ...

  5. Jmeter接口测试与数据驱动

    一. 背景 数据驱动Data Driven Testing(DDT),是一种用于创建自动化测试的方法,或者说是一种架构, 本质是输入数据和用这些数据获取测试结果, 使测试逻辑和测试数据分离. DDT的 ...

  6. jQuery的window.onload和$(function(){})

    <script src="js/jquery-1.11.3.js"></script> <script> //在onload事件中,所有页面内容 ...

  7. 02微信小程序-轮播的宽度100%显示和轮播的基础配置

    1==>如何让轮播的宽度100%显示? 你先给swiper 外面添加一个大盒子,给大盒子一个类 . <view class='lunbobox'> 然后wxss 里面设置 image ...

  8. webpy安装

    C:\Users\ceshi>python -m pip install web.pyCollecting web.py Downloading web.py-0.38.tar.gz (91kB ...

  9. 交互器中python中的帮助使用

    C:\Users\ceshi>pythonPython 2.7.12 (v2.7.12:d33e0cf91556, Jun 27 2016, 15:24:40) [MSC v.1500 64 b ...

  10. C++创建或者打开文本，记录运行日志

    代码 std::fstream f; f.open("D:/debugTime.txt", std::ios::app); f << "time of XXX ...