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. AntDesign(React)学习-8 Menu使用 切换框架页内容页面

    本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'rea ...

  2. 表结构修改以及sql增删改查

    修改表结构 修改表名 alter table 表名 rename 新名 增加字段 alter table 表名 add 字段名 数据类型 约束 删除字段 alter table 表名 drop 字段名 ...

  3. Tensorflow中multiply()函数与matmul()函数的用法区别

    1.tf.multiply()函数:矩阵对应元素相乘 官网定义: multiply(x,y,name=None) 参数: x: 一个类型为:half, float32, float64, uint8, ...

  4. OWASP安装

    下载网址:https://sourceforge.net/projects/owaspbwa/files/1.0rc2/ 下载完之后解压 解压之后 打开虚拟机 然后 虚拟机中菜单栏 文件---打开-- ...

  5. selenium 模拟滑动解锁

    来源:Selenium模拟JQuery滑动解锁   (selenium +Python ) 本文:selenium+Java package cn.gloryroad; import org.open ...

  6. winform常用控件介绍

    1.窗体 12.Label 控件 33.TextBox 控件 44.RichTextBox控件 55.NumericUpDown 控件 76.Button 控件 77.GroupBox 控件 78.R ...

  7. 题解 洛谷 P4145 【上帝造题的七分钟2 / 花神游历各国】

    题目 上帝造题的七分钟2 / 花神游历各国 题目背景 XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. 题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. ...

  8. Allegro 反射仿真--拓扑结构的提取提取及波形分析

    在SPECCTRAQuest下,选择Analyze->SI/EMI sim->Probe,进入如下图所示界面: 注:BRD文件命名不用使用中文字符及一些不常用的字符,如".&qu ...

  9. 后台异常 - sql语句查询出的结果与dao层返回的结果不一致

    问题描述 sql语句查询出的结果与dao层返回的结果不一致 问题原因 (1)select 中,查询的列名称重复,数据出现错乱 (2)使用不等号,不等号(!=,<>),查询出来的结果集不包含 ...

  10. python property(不动产)方法

    class Test(object): @property def test(self): return 100 @test.setter def test(self): return "修 ...