HTML连载28-标签的权重
一、什么是优先级的权重
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-标签的权重的更多相关文章
- HTML标签的权重
原文 简书原文:https://www.jianshu.com/p/c86d540aec40 大纲 1.HTML权重标签 2.常见的权重标签 3.常见的权重标签的使用 1.HTML权重标签 SEOer ...
- HTML连载9-video标签的第二种格式&audio标签
一.video第二种格式 1.背景:由于视频数据非常重要,所以五大浏览器厂商都不愿意支持别人的视频格式,所以导致了没有一种视频格式是所有浏览器都支持的.这个时候W3C为了解决这个问题,所以推出了第二种 ...
- HTML连载10-details标签&summary标签&marquee标签
1.详情(details)与概要(summary)标签 (1)作用:我们希望用尽可能少的空间来表达更多的信息,利用summary标签来描述概要信息,用details标签来描述详情信息 (2)格式: ...
- HTML连载8-video标签
一.video标签 1.作用:播放视频 2.格式:<video src="视频地址“></video> 3.可添加的属性: (1)autoplay="au ...
- HTML连载64-a标签伪类选择器的注意点与练习
一.a标签的伪类选择器注意点 (1)a标签的伪类选择器可以单独出现,也可以一起出现.也就是可以设置多个状态的样式. (2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原 ...
- HTML连载63-a标签的伪类选择器
一.a标签的伪类选择器 1.通过观察可以发现a标签存在一定状态 (1)默认状态,从未被访问过 (2)被访问过的状态 (3)鼠标长按的状态 (4)鼠标悬停在a标签上的演示 2.什么是a标签的伪类选择器? ...
- html标签SEO规范
原文地址:http://blog.sina.com.cn/s/blog_6c3898dd0100whr7.html 1.<!--页面注解--> 2.<html> 3.<h ...
- h1、h2、h3标签及strong标签对页面seo的影响
今天和大家来聊下h1,h2,h3,strong几个标签,在网页中的使用对页面seo的影响,也阐述了个人的一些想法. 首先简要讲下H标签及strong标签的含义:<h1>.<h2> ...
- jsp简单标签开发(一)
孤傲苍狼 @Override22 public void doTag() throws JspException, IOException {23 //得到代表jsp标签体的JspFragment24 ...
随机推荐
- Zabbix触发器和监控项设置时间范围
目录 一.实际业务场景 业务问题 解决办法 二.Zabbix触发器和监控项与用户预警设置时间范围配置流程 一.触发器设置时间范围 二.监控项设置时间范围 三.用户报警设置启用时间 一.实际业务场景 业 ...
- SpringBoot2.x｜Thymeleaf页面不能正常载入css、js文件
1.实现实现WebMvcConfig配置类可以解决页面不能加载css,js的问题: 扩展SpringMvc,编写一个配置类(@Configuration),是WebMvcConfigurationAd ...
- ASP.NET Core中的jQuery Unobtrusive Ajax帮助器
最近在ASP.NET Core下写文章管理系统时,准备在分页显示文章内容时,使用Ajax.网上找了篇帖文,简单翻一下,仅供自己查阅. 原链接:https://dotnetthoughts.net/jq ...
- Java内功心法，深入解析面向对象
什么是对象 对象是系统中用来描述客观事物的一个实体,它是构成系统的一个基本单位.一个对象由一组属性和对这组属性进行操作的一组服务组成. 类的实例化可生成对象,一个对象的生命周期包括三个阶段:生成.使用 ...
- JMeter性能测试入门--简单使用
1.JMeter整体简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试 ...
- mac os catalina mongodb最新安装流程
1.brew安装 不推荐用brew,因为现在mongodb闭源了,brew里已经搜索不到mongodb,不过还是可以用brew安装的,这篇就不写了. 2.官网下载 直接去官网下载一个zip,解压完放到 ...
- Qt导航栏 QListWidget
使用Qt Designer 使用QListWidget控件 设置样式 QListWidget::item { min-height: 30px; /*设置item高度*/ border-style: ...
- 个人项目：WC
一.GitHub项目地址:https://github.com/lseap/myWC 二.PSP表格: PSP2.1 Personal Software Process Stages 预估耗时(分钟) ...
- vm|vmware workstation 15|14 pro 激活|密钥|序列号|许可证
VMware Workstation Pro 15 激活许可证 UY758-0RXEQ-M81WP-8ZM7Z-Y3HDA VF750-4MX5Q-488DQ-9WZE9-ZY2D6 UU54R-FV ...
- NLP中的预训练语言模型（三）—— XL-Net和Transformer-XL
本篇带来XL-Net和它的基础结构Transformer-XL.在讲解XL-Net之前需要先了解Transformer-XL,Transformer-XL不属于预训练模型范畴,而是Transforme ...