CSS架构

还记得之前我们通过 css 选择器实现的表情选择器，忘记的话，可以回头看看，那今天了 我们把它又弄来了，没错，他又来了，不过这回我们实现的思路和以前的可不一样哦，他要引入我们前几章学习的变量，好了废话

前几天我们学习了变量，并通过变量画了两种不同风格的进度条，今天呢，我们再来实现一个有意思的东西 -- 悬浮跟踪按钮，好了，废话不多说，开始。

上一章，我们通过应用css变量而更好了完成了一个条形加载条的效果，更加简化了代码量，并使它变得更好维护了。今天呢，我们在通过css变量实现另一个有意思的东西 -- 心形加载条。

上一章我们说到了CSS变量，如果还没看的话，请看往期推荐的CSS之变量。接下来，我们就看一下，对于CSS变量来说的神奇操作。

今天要开始了一个新的项目，在搭建项目的时候，书写style的中公共变量时，发现行内样式并不能用于less公共变量，故因此学习了一下CSS的变量，特此记录一下。

有些时候，当我们在填写表单的时候，输入框聚焦的时候需要做一些操作，输入框失去焦点的时候也要做一些操作。而这些我们也可以通过CSS来实现。接下来就让我们介绍一下:focus-within这个选择器。

今天我们要说的是 `<label> 和 <input>` 这两个标签选择器，通过 `<label>` 的 for 属性与input属性挂钩实现奇妙的效果。接下来我们就用这两个选择器来实现一个标签导航功

回想一下，当我们在提交表单的时候，往往需要通过JS来判断输入的内容是否合法，其实，在某些情况下，是可以通过纯CSS来实现表单的校验的。 接下来我们就来介绍一下:valid和:invalid这两个选择

在我们开发的时候，应该会遇到在一个父节点下相同节点实现相同的样式，比如一个 ul 标签下 n 个li标签。那今天我们来介绍两个应用比较广泛的选择器 + 和 ~ ，他也可以实现我们前面说到的效果。

回想一下，在我们如果要渲染一组数据的时候，往往需要通过v-for来循环遍历我们的数据源，拿到数据的每一项进行相应的操作。 我们还回判断数据源里面里面是否有数据，如果没有的话，我们可能会有一个图片加文

有些时候在绘制页面的时候，我们可能需要完成一些微小的样式，或者加入一些文字什么的，这个时候我们如果添加一些额外的标签来绘制的话，可能就会显得非常繁琐，而且可能还会变得难以维护，这个时候我们就可以引入伪

昨天我们通过：hover选择其实实现一个鼠标划入，显示tips的效果。如果年看过的话，应该会对css有一个新的认识了。今天我们要介绍另外一个选择器，：checked。

终于，经过我们前几天的章节的总结，选择器的分类算是总结完了，大家可以来回查阅，巩固自己的知识。 那我们为什么要用选择器呢？接下来就让我们来好好说道说道。

今天，还是和上一章一样，继续我们的选择器分类，着实有点多啊！手都要敲麻，不过说，虽然表格一点一点敲出来，手麻了，眼花了，但我觉得我对打大掘金的表格写法，更精进了呢。

我们还是进行上一篇的内容，继续我们的CSS选择器分类说明，今天要介绍的是我们的条件选择以及状态选择器，条件选择器，可能平时开发的时候接触的比较少，但是状态选择器，你肯定经常会遇到，尤其在表单的填写上

在我们开发的时候，如果仔细一看你会发现，凡是涉及到HTML加CSS的时候，全是一水的选择器，各种类名丛出不穷，五花八门，基本上每个标签都至少套上那么一个类名。 而很少看到有标签选择器，相信同学们也知

盒模型相信大家对于这个概念非常是熟悉了，我们的排版以及样式都是在这个基础上进行的，所以掌握好它，才能让我们自己的编程技术更进一步，尤其是在根据UI同事的设计图的比例来固定我们的宽高时，有时候总会发现，

居中布局相信各位要用的场景算是比较多得了，大到类似登录页，小到按钮中的一个小图标，都需要达到居中的效果。今天就带大家来具体看一看居中布局的实现方法。

圣杯布局和双飞翼布局和布局也算是一种很经典的布局了吧，都是有左中右三列组成的，左右两列固定，中间自适应，高度固定且相等。接下来让我们看看是怎么实现的把。

在我们开发一些文字较多的页面时，往往需要对文字做一些特殊处理，比如文本环绕，亦或者文本溢出等。接下就让我带大家加看看具体是怎么实现的把。