HTML(11)——CSS三大特性

CSS拥有三大特性,分别是:继承性,层叠性,优先级

继承性

说明:子级 标签默认继承父级 标签的文字控制属性。

如果子级自己有样式,则父级的属性不生效

例如:

<style>

body{

font-size:30px;

}

</style>

<body>

<div>div</div>

</body>

此时div的内容拥有body设置的属性

层叠性

特点:

  • 相同的属性会覆盖,后面的CSS属性覆盖前面的CSS属性。
  • 不同的属性会叠加,不同的CSS属性都会生效。

例如:

优先级

优先级也叫权重,当一个标签使用了多种选择器,基于不同种类的选择器的匹配规则。

规则:选择器优先级高的样式生效。

通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

(选中标签范围越大,优先级越低)

叠加计算规则

如果是复合选择器。则需要权重叠加计算。

(行内样式,id选择器个数,类选择器个数,标签选择器个数)

规则:

  • 从左到右依次比较选个数,同一级个数多的优先级高,如果个数相同则向后比较
  • !important权重最高
  • 继承权重最低
相关推荐
用户298698530147 分钟前
在 React 中实现 RTF 与 PDF、HTML 的文档转换实践
javascript·react.js·html
咖啡无伴侣8 分钟前
3. 从零搭建企业级 Monorepo 工程化模板:集成 Husky 9 + lint-staged
前端·架构
MetaLite15 分钟前
Java通用枚举驱动下拉框-元数据接口与前端契约
java·前端·状态模式
Json____17 分钟前
基于 Node + Vue3 的选课管理系统:从教务业务到全栈实践
前端·node·毕设·wwwoop.com
创新技术阁20 分钟前
FastapiAdmin 定时任务实现原理与新建任务实操指南
前端·后端·fastapi
3A Cloud23 分钟前
Huashu Design:把 AI Agent 变成一间以 HTML 为画布的设计工作室
前端·人工智能·html
你别说话了26 分钟前
Webpack 如何迁移重构到 Vite
前端·webpack·重构
catastrophe_zy28 分钟前
如何用 WebCodecs 在浏览器里实现高清录屏 —— 无插件、无水印、直接导出 MP4
前端·javascript·录屏
zhanghaha131429 分钟前
Python进阶教程:24_Markdown 转 HTML 零基础超详细教程
开发语言·python·html
芳心粽伙饭31 分钟前
HTML第七章 表格标签
前端·html