css权重计算方法浅谈
在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高…………工作中才知道真正理解css权重重要性。理解权重了才能写出来最优css选择器来。对后面学习less,scss有很大帮助。
从css代码存放的位置来看,权重计算当然是--->内嵌样式 > 内部样式表 > 外联样式表!然而工作中我们的css代码都是写在外联样式表中的咯。
参考w3c样式选择器权重优先级是这个样子的
important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
有一种计算权重方法当然是不是官方有待考究
important 1 0 0 0
id 0 0 1 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新增选择器 44个
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中见过!可能它真的有用吧
css权重计算方法浅谈的更多相关文章
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- 浅谈对CSS的认识
自从进公司也有2个多月了,相信和我一批进来的小伙伴们都收获了很多东西,这个是在学校所学不到的,也让成长了很多.作为新人的我,从认为CSS是个很简单的东西,到现在觉得CSS中水很深,感觉学了很多的CSS ...
- 浅谈Normalize.css
浅谈Normalize.css 一.总结 1.Normalize.css:它在默认的HTML元素样式上提供了跨浏览器的高度一致性,花了几百个小时来努力研究不同浏览器的默认样式的差异. 2.优于rese ...
- 【css】浅谈BFC
定义: 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. BFC的布 ...
- CSS属性中的display属性浅谈;
首先我们要知道什么是块级元素和行内元素有什么区别: 承接上篇文章:(浅谈HTML和body标签) 块级元素:浏览器解析为独占一行的元素(例如:div.table.ul等.),浏览器会在该元素的前后显示 ...
- 浅谈CDN、SEO、XSS、CSRF
CDN 什么是CDN 初学Web开发的时候,多多少少都会听过这个名词->CDN. CDN在我没接触之前,它给我的印象是用来优化网络请求的,我第一次用到CDN的时候是在找JS文件时.当时找不到相对 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 浅谈 Attention 机制的理解
什么是注意力机制? 注意力机制模仿了生物观察行为的内部过程,即一种将内部经验和外部感觉对齐从而增加部分区域的观察精细度的机制.例如人的视觉在处理一张图片时,会通过快速扫描全局图像,获得需要重点关注的目 ...
- 浅谈Java的throw与throws
转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...
随机推荐
- Atitit 2016年attilax事业成就表
Atitit 2016年attilax事业成就表 1.1. 项目管理模型---Rem模型2 1.2. 项目管理模型---vsi模型val specs implt3 1.3. 研发体系完善(gui与游戏 ...
- 阿里云系列——7.阿里云IIS系列详解(过程+通用+最新)
网站部署之~阿里云系列汇总 http://www.cnblogs.com/dunitian/p/4958462.html 先讲IIS系列,Linux部署以后再继续讲 先打开主机管理平台,确认域名绑定 ...
- JavaScript高级编程 (2) - HTML 与 JavaScript
向HTML 页面中插入JavaScript 的主要方法,就是使用<script>元素.这个元素由Netscape 创造并在Netscape Navigator 2 中首先实现.后来,这个元 ...
- scheduleInRunLoop作用
例子一: - (void)setUpStreamForFile:(NSString *)path { // iStream is NSInputStream instance variable iSt ...
- linq to js使用汇总
用途:方便js操作查询json数据. 下载网址:http://jslinq.codeplex.com/ 使用方法:只需要引用linq.js即可. 查询方法: 一.where查询 var myList ...
- 【Oracle 集群】11G RAC 知识图文详细教程之RAC在LINUX上使用NFS安装前准备(六)
RAC在LINUX上使用NFS安装前准备(六) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇 ...
- SQL Tuning 基础概述04 - Oracle 表的类型及介绍
Tables A table describes an entity such as employees. You define a table with a table name, such as ...
- PowerShell 操作 Azure SQL Active Geo-Replication 实战
<Azure SQL Database Active Geo-Replication简介>一文中,我们比较全面的介绍了 Azure SQL Database Active Geo-Repl ...
- RedisRepository封装—Redis发布订阅以及StackExchange.Redis中的使用
本文版权归博客园和作者本人吴双共同所有,转载请注明本Redis系列分享地址.http://www.cnblogs.com/tdws/tag/NoSql/ Redis Pub/Sub模式 基本介绍 Re ...
- shell编程
最吸引人的莫过于及时看到成果的努力,echo就是最好的初学者反馈函数,因为它的存在你可以及时的打印出结果. 1.分支 if[ ]:then elif ;then else fi 2.简单的循环,循环是 ...