CSS学习(6)层叠
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)层叠的更多相关文章
- CSS学习摘要-层叠和继承
当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关. 元素的最终样式可以在多个地方定义,它们以复杂的形式相 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- CSS:CSS学习总结
CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...
- Html CSS学习(五)position定位 原
Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会 ...
- CSS学习之float解析
转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或 ...
- 前端css学习记录
参考资料:CSS权威指南(第三版)中文版 核心要点: HTML负责标记文档的结构(HyperText Markup Language),结构化语言. CSS 负责表现文档的样式(Cascading S ...
- HTML与CSS学习记录
title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
随机推荐
- 使用Vmware过程中,突然网络连接不上问题
###第一次的解决方法: 1.我一般过一段时间就会对虚拟机进行拍快照备份:在使用过程中,如果没有太大变化,恢复网络正常的快照一般是能解决问题的,但是要记得恢复快照之前要备份你已经修改过的所有东西,以防 ...
- Java世界最常用的工具类库
Apache Commons Apache Commons有很多子项目,常用的项目如下 BeanUtils 提供了一系列对java bean的操作,读取和设置属性值等 map和bean的互相转换 我们 ...
- HTML-表格-基础表格
主要内容: HTML表格 基本语法和结构: 案例: border用在table标签里面,表示边框的. th标签是加粗,width是宽度,表格宽度用在table里面.: caption用在table ...
- JavaScript的严格检查模式
JavaScript的严格检查模式 前提:IDEA设置为ECMAScript 6语法. 'use strict':严格检查模式,用来预防JS的随意性导致的问题. 比如:直接 i=1;这样定义成了全局变 ...
- python数据赋值后,修改新数据,原数据如何保证不被修改?
python中对象,赋值后是同一地址,如果是可变对象,对其中一个修改会影响到另一个,如果要生成完全新的对象,应使用deepcopyimport copydata1=copy.deepcopy(data ...
- 题解【洛谷P5958】[POI2017]Sabotaż
题面 考虑树形 \(\text{DP}\). 设 \(dp_i\) 为使 \(i\) 变成叛徒的最大值,同时 \(dp_i\) 也是使 \(i\) 不变成叛徒的最小值. 然后考虑如何转移状态. 如果 ...
- Jquery插件 之 zTree树加载
原文链接:https://blog.csdn.net/jiaqu2177/article/details/80626730 zTree树加载 zTree 是一个依靠 jQuery 实现的多功能 “树插 ...
- js或者jq的string类型或者number类型的相互转换及json对象与字符串的转换
1.将值乘以1,将string类型转为number类型 //算合计价值function summoney(money) { var zijin = $("#main_xm_dam09&quo ...
- JS高级---一个神奇的原型链
一个神奇的原型链 <script> var divObj=document.getElementById("dv"); console.dir(divObj); //d ...
- Asp.net的WebForm的落后技术
本文链接:https://bbs.csdn.net/topics/392077893 因为webform确实,企图通过在html标签中的runat="server",在iis接受请 ...