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 ...
随机推荐
- Servlet中实现多个功能案例
如何实现一个Servlet中的多个功能 前言:唉,打脸了,前脚刚说过要跟Servlet正式告别,后脚这不又来了,哈哈,总结出一点东西,纠结了一下还是做个分享吧,学习知识比面子重要,对吧,下回再也不约S ...
- jetty9部署
https://blog.51cto.com/5404542/1751702 Jetty 9部署web应用 Jetty相关的文章比较少,不过官方文档挺齐全的.做下记录也是好事. jetty9跟 ...
- GDAL读取Shapefile
-------------------------------------------------------------------------------------- #include < ...
- Jar 打包与执行
Java学习笔记之一,用于个人记录.整理自<Head First Java>. 假设有如下目录结构: 程序入口在 Jukebox8.java.这个代码文件开头是有如下这样的包声明语句的: ...
- Flask--g属性
目录 Flask之g属性 使用 session,flash,g的区别 Flask之g属性 专门用来存储用户信息的g对象,g的全称的为global g对象在一次请求中的所有的代码的地方,都是可以使用的 ...
- https://www.cnblogs.com/kxm87/p/9268622.html
数据库使用MySQL,ORM使用spring data jpa 1 因此需要再pom.xml文件中添加相应jar包.如下: <!-- 引入jap --> <dependency> ...
- SAP 如何得到交货单上的序列号清单？
SAP 如何得到交货单上的序列号清单? 以内向交货单为例(外向交货单方法了类似)予以说明. 1)VL33N,在交货单显示界面, 但是没办法通过这个界面里导出序列号清单. 2),只能通过查表的方式导出序 ...
- 转：Oracle的列转行函数：LISTAGG()
先看示例代码: with temp as( select 'China' nation ,'Guangzhou' city from dual union all select 'China' nat ...
- 【微信错误】{"errcode":"40013","errmsg":"invalid appid hint: [mackRA06203114]","success":false}
一.异常背景 发送可以跳转小程序的公众号模版消息 二.原因 当前公众号没有和被跳转的小程序关联 三.解决办法 去公众号平台将小程序和公众号进行关联就可以了
- apache配置项
环境:apache2.24 apache 官方文档:http://httpd.apache.org/docs/2.4/ 全部指令索引: http://httpd.apache.org/docs/ ...