纯css实现关系图

CSS 关系图简介

CSS 关系图, 是指以图表形式展示 CSS 选择器以及它们之间如何相互关联、层叠和覆盖。这个概念是基于CSS的层叠性质和选择器的优先级规则。这种图形化的表示方式帮助开发者可视化地理解不同选择器的层级和优先级,以及它们是如何在文档对象模型(DOM)树上进行匹配的。

这是常见的关系图效果

CSS 关系图的组成

CSS 关系图主要组成部分包括:

  • 选择器:它是指明哪些HTML元素需要被应用样式的模式。在关系图中,选择器会以节点的形式呈现。
  • 关系:代表不同选择器之间的关系,例如后代关系、子代关系和相邻兄弟关系等。
  • 优先级:涉及特定度(Specificity)和重要性(Importance),通常由选择器的类型和结构决定。
  • 继承:某些CSS属性可从父元素传递给子元素,这在关系图上通常以箭头显示。

利用CSS关系图

在开发过程中,CSS关系图可以用来调试样式问题,优化选择器的效率,以及组织和维护项目中的CSS代码。你可以用它来确定:

  1. 选择器准确性:确保所使用的选择器能正确匹配期望的HTML元素。
  2. 继承冲突:解读哪些属性是继承来的,哪些是直接指定的。
  3. 特定度计算:理解不同选择器的权重,从而预测层叠结果。
  4. 样式覆盖:知道哪些样式会基于优先级规则覆盖其他样式。

给每一个容器添加基本样式,间距,文字居中显示

css 复制代码
.div {
  width: 80px;
  height: 80px;
  display: flex;
  background-color: aquamarine;
  /* 盒子距离 */
  margin-bottom: 50px;
  margin-right: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

每个容器添加下线条连接,判断的依据是有无children,然后添加css 伪类样式

css 复制代码
/* 下线条 */
.xia::after {
  content: '';
  width: 1px;
  /* 线条往下的高度 */
  height: 25px;
  bottom: -25px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
}

上线条也是同理去实现伪类

css 复制代码
/* 上线条 */
.shang::before {
  content: '';
  width: 1px;
  /* 线条往下的高度 */
  height: 25px;
  top: -25px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
}

横线条在父元素添加伪类,定位到子元素的上线条上面

css 复制代码
.heng::after {
  content: '';
  /* 需要剪去盒子的大小和偏移量 */
  width: 100%;
  height: 1px;
  position: absolute;
  left: 40px;
  top: -25px;
  background-color: black;
}

最终实现的效果图

数据的结构

相关推荐
蚂蚁RichLab前端团队1 天前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 天前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5201 天前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20501 天前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 天前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 天前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉1 天前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 天前
v-model与-sync的演变和融合
前端·javascript·vue.js
matlab的学徒1 天前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat
从零开始学习人工智能1 天前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html