1.声明冲突

不同的样式,多次应用到同一元素

层叠:解决声明冲突的过程,浏览器自动处理(权重计算)

有时候需要修改样式的时候,可以使用优先级高的方式覆盖,而不是在源代码修改

①比较重要性

(1)作者样式表中的 !important 样式 用法:color:red !important; 拥有最高优先级,慎用。

(2)作者样式表中的普通样式

(3)浏览器默认样式

②比较特殊性(看选择器)

总体规则:选择器选中的范围越窄,优先级越高(如p.a比a优先级高)

具体规则:通过选择器,计算一个四位数(逢256进1),数越大,优先级越高

千位:内联样式,记做1,其他记做0

百位:id选择器的数量,没有记做0

十位:类选择器,属性选择器,伪类选择器的数量

个位:元素选择器,伪元素选择器的数量

③比较源次序

代码书写靠后的优先级高

应用

1.重置样式表

书写一些作者样式,覆盖浏览器的默认样式

就像是一种默认的标准格式的样式,通用的,先把浏览器的样式覆盖掉,后面具体的样式再写一个详细的样式表

常见的重置样式表:normalize.css、reset.css、meyer.css

2.爱恨法则(越写在后面的优先级越高)

link > visited > hover > active

a:link{color:black;}    正常

a:visited{color:gray;} 访问过的

a:hover{color:red;}     鼠标在上面时

a:active{color:chocolate;} 鼠标按下时

CSS学习(6)层叠的更多相关文章

  1. CSS学习摘要-层叠和继承

    当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关. 元素的最终样式可以在多个地方定义,它们以复杂的形式相 ...

  2. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  3. CSS:CSS学习总结

    CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...

  4. Html CSS学习(五)position定位 原

    Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会 ...

  5. CSS学习之float解析

    转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或 ...

  6. 前端css学习记录

    参考资料:CSS权威指南(第三版)中文版 核心要点: HTML负责标记文档的结构(HyperText Markup Language),结构化语言. CSS 负责表现文档的样式(Cascading S ...

  7. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  8. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  9. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  10. css学习归纳总结(三) 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

随机推荐

  1. [ZJOI2008] 骑士 - 基环树dp

    一类基环树dp都是这个套路吧 随便拆掉环上的一条边 然后跑树形dp,设\(f[i][0/1]\)表示以第\(i\)个人为根的子树,第\(i\)个人选或不选,能收获的最大值 以断点\(u,v\)为根分别 ...

  2. 利用Master库spt_values表 连续数字

    SELECT CONVERT ( ), dateadd(d, number, GETDATE()), ) AS every_time FROM master..spt_values n WHERE n ...

  3. [Python]Python日期格式和字符串格式相互转换

    由字符串格式转化为日期格式的函数为: datetime.datetime.strptime() 由日期格式转化为字符串格式的函数为: datetime.datetime.strftime() # en ...

  4. hashmap与currentHashMap

    hashmap的缺点 多线程不安全,在并发场景下使用时容易出现死循环,脏读问题等 死循环:https://juejin.im/post/5a66a08d5188253dc3321da0 (这篇好点)h ...

  5. poj1505(二分+贪心)

    "最大值尽量小"是一种很常见的优化目标. 关乎于炒书. 题目见此: http://poj.org/problem?id=1505 我的copy的代码如下: #include< ...

  6. 01-Java基本语法【前言、入门程序、常量、变量】

    重点知识记录: 1.java语言是美国Sun公司在1995年推出的高级编程语言. 2.java语言主要应用在互联网程序的开发领域. 3.二进制转换 1)十进制数据转换成二进制数据:使用除以2获取余数的 ...

  7. tensorflow学习笔记——GoogLeNet

    GoogLeNet是谷歌(Google)研究出来的深度网络结构,为什么不叫“GoogleNet”,而叫“GoogLeNet”,据说是为了向“LeNet”致敬,因此取名为“GoogLeNet”,所以我们 ...

  8. java基础之 修饰符

    一.访问修饰符 Java中,可以使用访问控制符来保护对类.变量.方法和构造方法的访问.Java 支持 4 种不同的访问权限. 1.default (即缺省,什么也不写): 在同一包内可见,不使用任何修 ...

  9. 计数器IP核

    Quartus II提供的LPM_couter IP核的使用 FPGA设计方式: 原理图,Verilog HDL设计方式,IP核输入方式 创建IP核 点击TOOLS—IP catalog-libray ...

  10. js获取当前时间:yyyy-MM-dd HH:MM:SS

    var nowDate = new Date();var year = nowDate.getFullYear(); < ? ; ? " + nowDate.getDate() : n ...