介绍在 JavaScript 中，我们可以利用变量，DOM 来保存状态，而 CSS 当中，我们也可以利用伪类选择器来保存状态，这就是 CSS 搞事的核心了。核心概念：保存状态。在上一篇 CSS 搞事技巧：checkbox+label+selector 中利用 checkbox+label+selector 来加深了解了 Flex 的弹性容器属性，这一节是要利用 :hover+:active 来了解 Flex 的弹性项目属性。这两个属性你有没有很熟悉呢，其实我们经常在 a 标签上使用它们LVHA 顺序: :link — :visited — :hover — :active效果图：示例源码、在线示例示例由于作者找不到工作，陷入自闭缺乏创作激情，所以这一个环节就略过……技巧说明hover 触发时，隐藏的子元素显示；active 触发时，子元素按照需求变化。代码解读1. 基础布局因为展示性的东西需要垂直居中展示，所以我利用 Vue 的 props 固化了垂直居中的样式：<Layout-Layout align-center justify-center :background-color=“bgColor”> hello flex item</Layout-Layout>为了更容易演示，有请高矮胖瘦均不一致的三兄弟：<div class=“flex__item”>大哥</div><div class=“flex__item”>二弟</div><div class=“flex__item”>三妹</div>为它们增加样式，并添加伪元素：<style lang=“stylus” scoped>.flex__item width 15% height 15% box-shadow 0 0 4px rgba(0, 0, 0, .5), inset 2px 0 1px rgba(0, 0, 0, .2) display flex align-items center justify-content center color #142334 // 钢青 &:nth-child(1) width 20% height 20% &:nth-child(2) width 16% height 18% &:nth-child(3) width 14% height 28% &::before position absolute content ‘一人得道’ padding 10px 6px border-radius 6px color #e0c8d1 // 淡青紫 background-color #1661ab // 靛青 &::after position absolute content ‘背水一战’ padding 10px 6px border-radius 6px color #e0c8d1 // 淡青紫 background-color #1661ab // 靛青</style>查看一下效果：2. :hover基础布局完成，接着是添加 :hover 效果。当鼠标悬停时，两个伪元素将会显示，并且一个往上一个往下：.flex__item &::before opacity 0 &::after opacity 0.flex__item:hover::before transform translateY(-80px) opacity 1.flex__item:hover::after transform translateY(80px) opacity 1查看效果：3. :active在我的记忆中，:active 是对任何元素都生效的，结果伪元素上设置失败了，然后就去看了下 MDN：或许伪元素与元素本身算作一体？还是说要选择到父元素（线索：:focus-within）？这个留之后解决吧，FLag +1。取舍的办法还是有的（伪装），牺牲带头大哥吧：.flex__item &:nth-child(1) width 20% height 20% &::after position absolute content ‘背水一战’ padding 10px 6px border-radius 6px color #e0c8d1 // 淡青紫 background-color #1661ab // 靛青 transition all 0.5s linear opacity 0 &:nth-child(2) width 16% height 18% &::before position absolute content ‘一人得道’ padding 10px 6px border-radius 6px color #e0c8d1 // 淡青紫 background-color #1661ab // 靛青 transition all 0.5s linear opacity 0 &:nth-child(3) width 14% height 28% &::before position absolute content ‘一人得道’ padding 10px 6px border-radius 6px color #e0c8d1 // 淡青紫 background-color #1661ab // 靛青 transition all 0.5s linear opacity 0查看效果：为伪类添加 :active 效果：.flex__item:active::before,.flex__item:active::after color #f1908c // 榴子红 background-color #fff box-shadow 0 2px 4px rgba(0, 0, 0, .5), 2px 0 4px rgba(0, 0, 0, .6)查看效果：4. align-self给子元素添加 align-self 不同的值：.flex__item &:nth-child(1) &:active align-self flex-end &:nth-child(2) &:active align-self flex-start &:nth-child(3) &:active align-self flex-start最后结果就如介绍中所示了。最后CSS 很多属性我们可能难以理解其效果，个人认为运用 CSS 来解释 CSS 不失为一种良好的方式。参考资料MDN中国色