html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一、CSS权重概念
CSS权重概念：指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
二、权重的等级
2.1、权重的等级划分
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=""，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0
2.2、权重的计算实例一
CSS3权重
div{
color:red !important;
}
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，所以文字的最终颜色为red
2.3、权重的计算实例二
CSS3权重计算2
#content div.main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
这是一个h2标题
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2 标题的最终颜色为red
最后提示：权重的和越大，样式的优先级越高！
三、CSS3新增选择器
3.1、E:nth-child(n)：匹配元素类型为E(标签的名字，如：div,p,span等等)且是父元素的第n个子元素，如下的例子
E:nth-child(n)
CSS3新增选择器
.list{
width: 200px;
height: 200px;
background-color: green;
}
.list div{
width: 100px;
height: 30px;
background-color: brown;
margin: 10px;
}
.list div:nth-child(2){
background-color: yellow;
}
提示：.list div:nth-child(2) 其中的 2 代表 list 里面的第2个div
3.2、E:first-child：匹配元素类型为E且是父元素的第一个子元素
3.3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
3.4、E > F E元素下面第一层子集
E > F E元素下面第一层子集
CSS新增选择器2
.list{
width: 200px;
height: 230px;
background-color: green;
}
.list div{
width: 100px;
height: 30px;
background-color: brown;
margin: 10px;
}
.list div>h1{
width: 50px;
height: 20px;
background-color: yellow;
font-size: 12px;
}
第1个h1
第2个h1
第3个h1
3.5、E + F 紧挨着的后面的兄弟元素
`E + F` 紧挨着的后面的兄弟元素
CSS新增选择器3
.list{
width: 200px;
height: 330px;
background-color: green;
}
.list div{
width: 100px;
height: 30px;
background-color: brown;
margin: 10px;
}
.list h1{
width: 80px;
height: 20px;
font-size: 10px;
background-color: brown;
margin: 10px;
}
/* E + F 紧挨着的后面的兄弟元素 */
.list div+h1{
background-color: yellow;
}
第1个h1
第2个h1
3.6、E ~ F E元素后面的兄弟元素
`E ~ F` E元素后面的兄弟元素
四、属性选择器
4.1、E[attr] 含有attr属性的元素或者 E[attr='ok'] 含有attr属性的元素且它的值为“ok”,如下
属性选择器1
div{
color: brown;
}
div[data-attr='ok']{
color:red;
}
4.2、E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”
`E[attr^='ok']` 含有attr属性的元素且它的值的开头含有“ok”
属性选择器2
div{
color: brown;
}
div[data-attr^='ok']{
color:red;
}
4.3、E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
4.4、E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”
E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”
html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器相关推荐
- css权重计算方法浅谈
在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...
- CSS概念，引入，选择器
概念 层叠样式表,定义如何显示HTML元素. 使用方式 行内样式 不推荐使用此方式 结构 和 样式的 杂糅会影响后期的维护 <p style="color: red"> ...
- html 样式权重,CSS 权重详解
对于 CSSer 来说,多多少少都会遇到过 "样式规则不生效?"."样式规则被覆盖?" 等等问题,这些都与 CSS 权重有关系. 选择器匹配原理 在此之前,容我 ...
- HTML5类选择器使用,CSS选择器种类及使用方法
CSS选择器种类及使用方法 2018年04月17日 | 萬仟网IT编程 | 我要评论 css选择器 有通配符选择器书写格式:*+{声名块} 并集选择器/组合选择器 书写格式;元素或类或id+" ...
- 【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...
- 好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超 ...
- html选择定位位置,html5的地理位置定位
html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理 GPS, WIFI, IP, 手机信号基站 核心对象 Geolocation是 ...
- 类选择器选择非唯一属性无法精确取值的问题
类选择器选择非唯一属性无法精确取值的问题 一.总结 一句话总结:因为做的操作并不是精确选取,因为执行了两次选择器,所以肯定不对啊. 二.类选择器选择非唯一属性无法精确取值的问题 1.截图 2.代码 1 ...
- 传智书城首页设计代码_(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载...
模板名称:(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载 本套织梦模板采用织梦最新内核开发的模板,这款模板使用范围广,不仅仅局限于一类型的企业,创意设 ...
最新文章
- 关于SQLServer和MySQL动态条数限制
- HTML fieldset 标签 -- 表单分组
- SAP CRM IBASE对应的搜索实现，动态SQL语句的拼装
- 计算机编程输入与输出,计算机编程语言的发展与输入输出设备的使用
- java中每个类都有子类,Java中所有的类都是从（ ）类或其子类派生而来的。
- js多个物体运动问题2
- iphone-common-codes-ccteam源代码 CCCommon.h
- 风云第三部 第533回 乌云蔽日 力掌乾坤
- java生成二维码并导出成Excel
- 仿XP画图板—升级版
- JAVA 仿XP画图板的总结
- OSChina 周二乱弹 —— 怎么让可爱的女孩子吃药
- Classic Shell：找回 Windows 8 / Windows Server 2012 的经典的开始按钮和开始菜单
- IT架构师_隽语集(Design Thinking _0101)
- 问题记录：SyntaxError: Missing parentheses in call to ‘print‘.
- 二维码如何转为链接，看了这篇文章才知道多好用！
- C++的函数声明、函数定义、函数调用
- context 的用法是什么？（数据之间的跨组件交互传递）
- 冥想五个程序r_冥想将使您成为一个更好的程序员：这就是方法。
- 电脑磁盘占用100%解决办法