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 ...
随机推荐
- PHP导出文件到csv函数
PHP导出文件到CSV函数 function exportCSV($data=array(),$title=array(),$filename) { $encoded_filename = urlen ...
- .net core 3.0中的Json API
在.net core 3.0中,内置了一套新的json api,主要用于去除asp.net core对json.net的依赖,同时也提供了更好的性能(直接处理 UTF-8,而无需转码到 UTF-16) ...
- 2019-11-23-WPF-使用-RawInput-接收裸数据
原文:2019-11-23-WPF-使用-RawInput-接收裸数据 title author date CreateTime categories WPF 使用 RawInput 接收裸数据 li ...
- Docker中如何调试剖析.net core 的程序。
前言 现在.net core跨平台了,相信大部分人都把core的程序部署在了linux环境中,或者部署在了docker容器中,与之对应的,之前都是部署在windows环境中,在win中,我们可以用wi ...
- vue 获取视频时长
参考资料:js获取上传音视频文件的时长 直接通过element-ui自带的上传组件结合js即可,代码如下: HTML: <el-upload class="upload-demo&qu ...
- [笔记] C# 如何获取文件的 MIME Type
MIME Type 为何物: MIME 参考手册 svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types 常规方式 对于有文件后 ...
- Docker 网络简单说明
docker0 网络模型小结 Docker Daemon 会创建出一个名为 docker0 的虚拟网桥 ,用来连接宿主机与容器,或者连接不同的容器. veth pair 是用于不同network na ...
- 2019CCPC网络赛 C - K-th occurrence HDU - 6704（后缀数组+ST表+二分+主席树）
题意 求区间l,r的子串在原串中第k次出现的位置. 链接:https://vjudge.net/contest/322094#problem/C 思路 比赛的时候用后缀自动机写的,TLE到比赛结束. ...
- UGUI在两个UI间坐标转换
在UGUI中,在两个Canvas之间进行坐标转换,从CanvasA下的坐标转换到CanvasB下. 或者在同一个界面下,从不同的节点下,转成相同的坐标. 函数定义 public static bool ...
- VS调试
1.调试输出变量值 F9先设置断点,开始调试后,依次选择调试——>窗口——>局部变量和监视——>监视1. 点击“全部中断”——>之后局部变量会显示相关变量值,监视1可以查看变量 ...