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 ...
随机推荐
- Child module D:\program\eclipse\eclipse\workspace_taotao\taotao-parent\taotao-manager-service of
1.淘淘商城的项目,报了这个错误,也是一脸懵逼. [INFO] Scanning for projects... [ERROR] [ERROR] Some problems were encounte ...
- 2019-11-29-WPF-模拟触摸设备
原文:2019-11-29-WPF-模拟触摸设备 title author date CreateTime categories WPF 模拟触摸设备 lindexi 2019-11-29 08:47 ...
- 读取txt文件内容，并按一定长度分页显示
private List<string> SaveContentUpload(FileUpload file) { List<string> list_content = ne ...
- ASP.NET Core系列：日志
1. NLog 添加安装包: Install-Package NLog.Web.AspNetCore <?xml version="1.0" encoding="u ...
- git did not exit cleanly (exit code 1) 的解决办法
问题描述: 关于Git的使用,在通常情况下,习惯于先在本地创建一个本地仓库,然后将项目提交到本地master,再将本地master中的项目Push 到远程仓库中,这样问题就来了. 具体错误信息如下: ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- opencv::分水岭图像分割
分水岭分割方法原理 (3种) - 基于浸泡理论的分水岭分割方法 (距离) - 基于连通图的方法 - 基于距离变换的方法 图像形态学操作: - 腐蚀与膨胀 - 开闭操作 分水岭算法运用 - 分割粘连对象 ...
- jQuery中$符号的作用
jQuery中$符号的作用 1.查找作为jQuery包装器,利用选择器来选择DOM元素(这个也是最强大的功能) 例如:$("table tr:nth-child(even)") 基 ...
- Redsi缓存问题（穿透，击穿，雪崩）以及解决办法（分布式锁）【高并发问题】
Redsi常见问题 缓存在高平发和安全压力下的一些问题 缓存击穿 是某一个热点key在高并发访问的情况下,突然失效,导致大量的并发大金mysql数据库的情况 缓存穿透 是利用redis和mysql的机 ...
- NACOS升级操作
Server端 0.8.0及以上版本: 解压安装包后替换{nacos.home}/target/nacos-server.jar 删除{nacos.home}/plugins/cmdb/及{nacos ...