css层叠性,继承性,优先级

前言

  本文概要:讲述css的三大特性,层叠,继承和优先级。

层叠性

描述:我们试想以下这种情况:我们定义了同一个选择器,但是定义的属性不同。属性有相同的也有不同的,那么最后我们这个页面会听谁的。层叠性就是针对这种情况。

层叠性原则:所有相同选择器的属性合起来,相同的属性后定义的覆盖前定义的。

案例演示:

    <style>div {background-color: blue;color: aqua;}div {background-color: darkmagenta;}</style>
</head><body><div>猜猜谁管事?</div>
</body></html>

结果如下:

总结一句话:不冲突一起上,冲突了后来居上。

继承性

描述:这种特性是针对文字,颜色的样式。总结就是:父标签的文字及颜色行高样式,如果子标签没有额外定义,那么就会直接用父标签文字的样式进行显示。

继承属性:text,line,color这类跟文字有关的标签。

案例演示:(body标签是一切内容标签的父标签,我们给body标签设置文字属性看看)

    <title>Document</title><style>body {color: bisque;font: 700 20px/1.5 "微软雅黑";}</style>
</head><body><div>猜猜谁管事?</div>
</body></html>

结果如下:

可以看到给body设置的文字属性直接就被子标签div给继承了。

上面的1.5是行高,可以写20px这类的固定行高,上面这个写法是文字的型号的1.5倍。后面给子标签设置文字大小的话行高会跟着子标签变化。

优先级

优先级:

越往下优先级越高。

描述:在相同优先级的情况下我们有层叠性,但是这种不同的选择器我们会根据他的优先级进行判定。

复合选择器的优先级:

复合选择器是一种加法

比如div p是两个元素选择器,他们都是0,0,0,1,相加就是0,0,0,2

看上面权重是四个数,我们复合选择器会相加

这里假设两个数:1,2,6,4和2,6,8,2

他们依次从左往右比较,相同比较下一位,得到大的一个。

上面两个2,6,8,2最右侧大,则听他的。

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

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

相关文章

小图标还不会设计!

ICON图标设计 hello&#xff0c;我是小索奇 image-20230805225451447 你有好奇过这样的图标如何设计的吗&#xff1f; 其实非常简单&#xff0c;仅需要一行代码即可完成&#xff0c;本篇文章就带伙伴们使用&#xff0c;每天看一篇&#xff0c;简单易懂&#xff0c;日久技长~…

设计模式学习笔记 - 开源实战三(中):剖析Google Guava中用到的设计模式

概述 上篇文章&#xff0c;我通过 Google Guava 这样一个优秀的开源类库&#xff0c;讲解了如何在业务开发中&#xff0c;发现跟业务无关、可以复用的通用功能模块&#xff0c;并将它们抽离出来&#xff0c;设计成独立的类库、框架或功能组件。 本章再来学习下&#xff0c;Go…

稀碎从零算法笔记Day54-LeetCode:39. 组合总和

题型&#xff1a;数组、树、DFS、回溯 链接&#xff1a;39. 组合总和 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数…

卷王问卷考试系统/SurveyKing调查系统源码

SurveyKing是一个功能强大的开源调查问卷和考试系统&#xff0c;它能够快速部署并适用于各个行业。 这个系统提供了在线表单设计、数据收集、统计和分析等功能&#xff0c;支持20多种题型&#xff0c;提供多种创建问卷的方式和设置。 项 目 地 址 &#xff1a; runruncode.c…

软件设计师软考中项学习(二)之计算机系统基础知识

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 文章目录 学习目标学习内容学习笔记学习总结 学习目标 计算机系统硬件基本组成 中央处理…

React【Day4】

路由快速上手 1. 什么是前端路由 一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候&#xff0c;path 对应的组件会在页面中进行渲染 2. 创建路由开发环境 # 使用CRA创建项目 npm create-react-app react-router-pro# 安装最新的ReactRouter包 …

【6】mysql查询性能优化-关联子查询

【README】 0. 先说结论&#xff1a;一般用inner join来改写in和exist&#xff0c;用left join来改写not in&#xff0c;not exist&#xff1b;&#xff08;本文会比较内连接&#xff0c;包含in子句的子查询&#xff0c;exist的性能 &#xff09; 1. 本文总结自高性能mysql 6…

Spark-机器学习(3)回归学习之线性回归

在之前的文章中&#xff0c;我们了解我们的机器学习&#xff0c;了解我们spark机器学习中的特征提取和我们的tf-idf&#xff0c;word2vec算法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你…

异常检测 | SVDD支持向量数据描述异常数据检测(Matlab)

异常检测 | SVDD支持向量数据描述异常数据检测&#xff08;Matlab&#xff09; 目录 异常检测 | SVDD支持向量数据描述异常数据检测&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 用于一类或二元分类的 SVDD 模型 多种核函数&#xff08;…

栈与堆的比较

栈与堆的比较 栈与堆的比较申请后系统的响应申请效率的比较申请大小的限制堆和栈中的存储内容总结参考 栈与堆的比较 内存布局&#xff1a; 申请后系统的响应 栈&#xff1a;只要栈的剩余空间大于所申请空间&#xff0c;系统将为程序提供内存&#xff0c;否则将报异 常提示…

InnoDB架构:磁盘篇

InnoDB架构&#xff1a;磁盘篇 InnoDB是MySQL数据库中默认的存储引擎&#xff0c;它为数据库提供了事务安全型&#xff08;ACID兼容&#xff09;、行级锁定和外键支持等功能。InnoDB的架构设计优化了对于读取密集和写入密集型应用的性能表现&#xff0c;是一个高度优化的存储系…

【经典小游戏】猜数字

前言1. 游戏介绍2. 游戏实现3. 游戏优化结语 个人主页&#xff1a;C_GUIQU 前言 各位小伙伴大家好&#xff01; 先问大家一个问题&#xff1a;我们为什么要学习&#xff1f; 简单来说&#xff0c;就是为了实践&#xff01;只有不断学习才可以帮助我们更好地实践&#xff01; 小…