CSS中的层叠性、继承性、优先级、权重

css三大特性:

三大特性:层叠性、继承性、优先级

层叠性:

指多种css样式的叠加,是浏览器处理多种css样式冲突的能力,如果给一个元素通过不同或者相同的选择器设置相同的属性但属性值不同时,权重相同的情况下,冲突属性后面的属性(值)会把前面的属性(值)层叠(覆盖)。

	p {color: red;}p {color: yellow;/* 后面的属性会把前面的属性覆盖掉 */}<p>显示的为yellow色</p>

继承性:

指子元素会继承父标签的某些样式,给父标签设置的某属性,如果在子标签中未设置该属性,子元素则会继承父标签的这个属性及值,需要注意的是并不是所有属性都可以被继承。

	div {color: pink;}<div><p>显示的是pink色</p></div>

css优先级:
指多个规则同时出现在某个元素上,该执行哪个规则的问题,在权重相同的情况下,css书写靠后面的会执行,否则按照下面权重大小执行
在这里插入图片描述

	div {color: blue!important;/*!important使用方法*/}

权重叠加:

CSS特殊性(Specificity):

关于权重叠加,这里有计算公式:CSS Specificity称为CSS 特性或称非凡性,它是衡量css值优先级的一个标准,specificity用一个四个级别的数字串表示,从左到右级别递减,同级别的数字可以相加,但是级别之间没有进制
在这里插入图片描述

权重叠加计算:

相同级别间的权重可以相加,但是不能向上一级进位,如: 0,0,0,3 + 0,0,0,9 =0,0,0,12 而不是 0,0, 1, 2

	 /*权重叠加计算:*/div ul  li   ------>      0,0,0,3.nav ul li   ------>      0,0,1,2a:hover      -----—>      0,0,1,1.nav a       ------>      0,0,1,1   #nav p       ----->       0,1,0,1div p {color: red;/* 此权重大于下面的权重,所以显示的是红色red */}p {color: yellow;}<div><p>测试文本</p></div>

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575438.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

struts2线程安全

struts2线程安全 2012-02-16 21:07:58分类&#xff1a; 系统运维 问题&#xff1a;Struts 2 Action对象为每一个请求产生一个实例&#xff0c;因此没有线程安全问题。Spring的Ioc容器管理的bean默认是单实例的,上一次请求处理的状态信息被保持下来&#xff0c;并影响了下一次的…

Nifi 怀疑出个bug 流程中的实时数据结果痕迹没有不是实时的,是之前的。以及相应解决办法。

1 在 Nifi 中做数据处理&#xff0c;有一个半小时之前执行过的流程&#xff0c;因为没设置好执行的时间&#xff0c;结果把读的数据库的表持续读成数据流 流到文件里&#xff0c;结果生成大量文件&#xff0c;一个文件就存着一张表的结果。 2 然后过了三十分钟吧&#xff0c;…

CSS中背景颜色、背景图片、渐变色、背景定位、精灵图(雪碧图)介绍

背景background: 背景可以设置为颜色和图片&#xff0c;设置为图片时&#xff0c;可以对图片继续设置。 background-color:设置背景颜色&#xff1a; 其颜色的取值方式前面提到过&#xff0c;和color的取值一样&#xff0c;但是默认值transparent透明 body {background-colo…

HTML左边和右边是固定的宽度但是中间是自动的布局方式

对于这个布局方式我们可以是用绝对定位的方式来实现这个效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns"http://www.w3.org/1999/xhtml&quo…

There is insufficient memory for the Java Runtime Environment to continue. NIFI 启动时报 jvm内存溢出

Nifi 突然启动报错。之前正常&#xff0c;停了两天再起就jj了。。 Nifi 解压路径还有log文件夹&#xff0c; 里面有各种日志文件可看。他把错误集中另存为了一个文件&#xff1a; 打开里面一通查看&#xff0c;调整。描述是java的运行环境jvm内存超出了&#xff0c;帖子…

CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型

盒子模型&#xff08;Box Model&#xff09;&#xff1a; 指把HTML页面中的元素看作是一个矩形的盒子&#xff0c;也称容器&#xff0c;这个盒子从内到外由&#xff1a;元素的内容&#xff08;content&#xff09;、内边距&#xff08;padding&#xff09;、边框&#xff08;b…

servlet/filter/listener/interceptor区别与联系(转)

由于最近两个月工作比较清闲&#xff0c;个人也比较“上进”&#xff0c;利用工作空余时间&#xff0c;也继续学习了一下&#xff0c;某天突然想起struts2和struts1的区别的时候&#xff0c;发现为什么struts1要用servlet&#xff0c;而struts2要用filter呢&#xff1f;一时又发…

Eclipse和IDEA 简单对比说明

Eclipse和IDEA Eclipse 当下最流行的IDE&#xff08;集成开发环境&#xff09;当属eclipse和idea莫属&#xff0c;不少新手都在问这两个ide哪个更好&#xff0c;今天给大家说一下自己这些年来使用这两款开发环境的心得。 一般情况下&#xff0c;问这个问题大多是新手&#xff0…

CSS中文档流之普通流,浮动及定位、浮动特性及清除浮动的方式、定位模式,子绝父相搭配定位方式、z-index层级

文档流&#xff1a; 普通流&#xff08;normal flow&#xff09;&#xff1a; 字面意思是普通流或者标准流&#xff0c;也就是常说的文档流&#xff0c;指网页内标签正常是从上到下&#xff0c;从左到右排列的意思&#xff0c;css的定位机制有3种&#xff1a;普通流&#xff…

Java字符串的10大热点问题盘点

本文是html5tricks原创翻译&#xff0c;转载请看清文末的转载要求&#xff0c;谢谢合作&#xff01; 下面我为大家总结了10条Java开发者经常会提的关于Java字符串的问题&#xff0c;如果你也是Java初学者&#xff0c;仔细看看吧&#xff1a; 1、如何比较字符串&#xff0c;应该…

VScode中常用element语法

Element语法&#xff1a; 熟练掌握element语法可以大大提高开发效率&#xff0c;建议在平时练习时留意element语法&#xff0c;下面是常用VScode中element语法&#xff1a; 1、快速生成HTML骨架&#xff1a;!Enter或Tab键 2、快速生成带有id或者class名的标签&#xff1a;标签…

jQuery Tools:Web开发必备的 jQuery UI 库

基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库&#xff0c;包含网站最常用的Tabs&#xff08;选项卡&#xff09;、Tooltip&#xff08;信息提示&#xff09;、Overlay&#xff08;遮罩、弹窗&#xff09;、Scrollable&#xff08;滚动控制&#xff09;、Form Validat…

控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析

元素的显示与隐藏&#xff1a; 常见控制元素的显示和隐藏的属性有display、visibility、overflow&#xff0c;需要清楚的理解三者之间的区别。 display显示&#xff1a; 当值为none时为销毁对象&#xff0c;不保留原位置&#xff0c;当值为block时为生成对象。 visibility可…

上周热点回顾(5.26-6.1)

热点随笔&#xff1a; [歪谈]员工(人才),留得住是因为本身就留得住&#xff1b;留不住的,你永远留不住&#xff08;沈逸&#xff09; 离开北京之前我把过去四年做过的项目的全部源码公开了、需要的联系我、不需要的也欢迎喷水&#xff08;Suzuki.kakeru&#xff09; 关于公司…

html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制

Canvas容器: canvas标签用来定义图像的容器&#xff0c;必须配合脚本来绘制图像&#xff0c;canvas也运用于游戏开发。注意&#xff1a;canvas绘制图时会出现线条模糊情况&#xff0c;这是因为显示屏像素和canvas中定义的一个点不完全重合&#xff08;相差0.5&#xff09;导致…

[VirtaulBox]网络连接设置

由于前几天老师要检查大作业&#xff0c;而我们的数据库是放在虚拟机里的&#xff08;不想在本机里放太多东西&#xff0c;保持轻便快速...&#xff09;&#xff0c; 平时是用的桥接模式&#xff0c;但是考虑到可能教室里不好上网&#xff08;图书馆底下信号比较差...&#xff…

MySQL INFORMATION_SCHEMA 使用

一、INFORMATION_SCHEMA介绍 第一个查询看看库里有多少个表&#xff0c;表名等select * from INFORMATION_SCHEMA.TABLES information_schema这张数据表保存了MySQL服务器所有数据库的信息。如数据库名&#xff0c;数据库的表&#xff0c;表栏的数据类型与访问权限等。再简单点…

SVG矢量图简介

SVG矢量图&#xff1a; html5支持内联svg,svg指可以伸缩的矢量图&#xff0c;其优点是放大不会模糊&#xff0c;支持任意尺寸打印不损坏品质&#xff0c;可通过编辑器创建和修改&#xff0c;&#xff1b;使用XML定义&#xff0c;其本质就是XML文件&#xff0c;和Canvas类似&am…

Web SQL介绍,web sql中增删改查、数据存储位置、运行脚本、建表建库

Web SQL&#xff1a; Web SQL是一种简单的存在服务器中的数据库&#xff0c;运行在javascript脚本中&#xff0c;其数据储存在计算机Application中Web SQL中。 web sql提供了三个核心方法&#xff1a; 1.openDatabase(‘dbname’,‘edition’,‘explain’,‘size’),此方法用…

mrql初级教程-使用(er)

最近使用mrql做xml文件解析&#xff0c;使用xpath来进行判断使用的方法如下&#xff0c;其中t.mrql文件如下&#xff1a;v args[1];store ty:source(xml,args[0],{"page"},xpath(.[idID6]/place));ty;执行下面的命令mrql -local t.mrql hdfs://183.175.12.220:9010/u…