css权重计算方法浅谈
在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高…………工作中才知道真正理解css权重重要性。理解权重了才能写出来最优css选择器来。对后面学习less,scss有很大帮助。
从css代码存放的位置来看,权重计算当然是--->内嵌样式 > 内部样式表 > 外联样式表!然而工作中我们的css代码都是写在外联样式表中的咯。
参考w3c样式选择器权重优先级是这个样子的
important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
有一种计算权重方法当然是不是官方有待考究
important 1 0 0 0
id 0 1 0 0
class 0 0 1 0
tag(标签) 0 0 0 1
伪类 0 0 1 0
att属性 0 0 1 0
伪对象 0 0 0 1
通配符 0 0 0 0
选择器种类
严格意义上说CSS的选择器分类只能分成三种,标签名、类选择器、ID选择器。当然这也是设计之初就这么设计的。后面的选择器都是由于特殊需求添加的,当初我学习的时候就这些选择器也是够用的了!
标签选择器:p{}
类选择 : .container{}
ID : 选择器 #logo{}
当然了ID选择器在一个页面里面你只能有一个,多个的话当然不会报错,毕竟CSS不是编程语言嘛!但是后台开发人员经常使用ID,如果不幸他命名规则和你定义一样的,那这个错误就不好找出来了。
扩展选择器:
后代选择器:p span a{}; 后代选择就是在上一个选择器的后面加一个空格接着写选择器。这么写匹配到的标签就更少了。当然权重就会更高了!
群组选择器 : p,div,img{};群组选择器是当多个标签都需要同样的样式的时候,用一个逗号分隔开多个选择器。这样写法会节省很多代码量
下面介绍一下css2,css3中的选择器
CSS1&2中的选择器介绍
CSS3 新增选择器介绍
CSS3属性选择器
CSS3结构伪类选择器
CSS3UI元素状态伪类选择器
CSS3其他新增选择器
CSS1&2元素选择器
元素选择器
* 通用选择器
E 元素选择器
E#Id id选择器
E.class 类选择器
关系选择器
E F 包含选择器 E元素包含的F元素。
E>F 子选择器 选择E元素的子元素F
E+F 相邻选择器 E元素之后F元素
伪类选择器
E:link 链接伪类 未被访问前样式
E:visited 以被访问过的样式
E:hover 鼠标悬停时的样式
E:active 鼠标点击与释放之间
E:focus 元素成为输入焦点
E:lang 匹配使用特殊语言的E元素
属性选择器
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值为val的E元素
E[att~="val"] 选择具有att属性且属性值为用空格分隔的字词列表,其中一个等于val的E元素
E[att|="val"] 具有att属性且元素值为以val开头并用连接符-分隔的字符串的E元素
伪对象选择器
E:first-letter 设置对象内的第一个字符的样式。
E:first-line设置对象内的第一行的样式
E:before设置在对象前发生的内容,用来和content属性一起使用
E:after设置在对象后发生的内容,用来和content属性一起使用。
CSS3新增选择器 4个
E F 包含选择器
E>F 子选择器
E+F相邻选择器
E~F兄弟选择符
P~P{color:#f00} 选择的是第一个P后面的P元素。(只能选择它后面的兄弟)
结构伪类选择器
E:root E在文档的根元素
E:first-child父元素的第一个子元素E
E:last-child父元素的最后一个子元素E
E:only-child父元素仅有的一个子元素E
E:nth-child(n)父元素的第n个子元素E
E:nth-last-child(n)父倒数第n个子元
E:first-of-type同类型中的第一个同级兄弟元素E
E:last-of-type同类型中最后一个同级兄弟元素E.
E:only-of-type同类型中唯一的一个同级兄弟元素E
E:nth-of-type(n)同类型中第n个同级兄弟元素E.
E:nth-last-of-type(n)匹配同类中倒数第n个同级兄弟元素E
E:empty没有任何子元素包括text节点的元素E.
P:first-child{}解读,先找到P元素,再找他的父节点,从父节点去找第一个元素为P的节点。
P:last-child{}和p:first-child{}差不多
li:nth-child(2){}选中指定序号。找li父元素ul,找到ul的第二个子元素是否是li,是就选中。
li:nth-child(even){}/*even选中偶数,odd选中奇数*/
li:nth-child(3n+1){}/*自定义序列类型(正序)*/
li:nth-last-child(){}/*是nth-child()的倒序*/
P:first-of-type{}找到第一个是P标签的元素。
上面的标签可分为 child系类和of-type系列
E:root{}用法只有一个,
html:root{},其他标签都没有用。这个选择器我只在bootstrap中见过!可能它真的有用吧
转载于:https://www.cnblogs.com/zhongke/p/6213281.html
css权重计算方法浅谈相关推荐
- css中字体下划线样式,css下划线 浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
- html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
- CSS基础:浅谈position
浅谈position 定位(position)允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置-- MDN 一.文档流 什么是 ...
- css inport作用,浅谈css和@import区别及用法详解
下面小编就为大家带来一篇浅谈css和@import区别及用法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法. 一.用法 ...
- CSS优先级算法浅谈
转自:微点阅读 https://www.weidianyuedu.com 在面试之前对css优先级的理解是 :ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先 ...
- hbuilderx 2.9.8 公用css样式_浅谈关于vue中scss公用的解决方案
简述 最近由于项目要求查阅了很多关于scss公用的文章,以下只是对那些文章进行简单的总结 解决方法 a.当我们要使用scss文件的共用时,首先我们就要想到如何应当如何编辑scss文件,比如降低scss ...
- web前端技术杂谈--css篇(1)--浅谈margin(续)
2019独角兽企业重金招聘Python工程师标准>>> 1.margin负值实现左右两列布局(左边固定宽度,右边自适应)代码如下: css代码: .main{ ...
- 打印样式CSS的技巧浅谈
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果. 我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果: 使用响应式布局设置打印的效果 在合适的时候打印背景图片和颜色 添加显示的 ...
- Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍 选择器权重 字体属性 文本属性 元素分类 display属性: 块状元素 行内元素 行内块元素 盒模型 内边 ...
最新文章
- 关于MySQL内核,一定要知道的!
- android列表集合点击事件,给ListeView列表中的每一个Item添加点击事件
- Java:四种取整的方法
- Android内存泄漏总结
- 拿了年终奖后,发现自己又拖后腿了?对不起,可能事实并没有那么糟糕...
- 前端学习(2796):实现左侧数据渲染和点击高亮
- 【机器学习】知识框图总结
- docker如何部署python项目_Docker如何部署Python项目的实现详解
- DOM JS实现动态表格
- Spring 框架 AOP 的总结
- 0. Python3源码—编译
- 医疗NLP相关数据集整理
- 【转】使用红雪越狱iPhone 4.3.3教程
- 机械设备网站建设多少钱
- JSTL 标签库c:if :forEach :forTokens
- Java面试基础知识III
- 40 岁的 C++ 没有中年危机
- 编译器、汇编器、链接器
- 老虎证券web端PWA实践总结
- c#中继承和接口的区别与联系