一个很棒的下划线css 效果

最近刷视频刷到一个分享,发现是一个很棒的 css 效果:通过使用background相关属性来实现一段文本的多彩下划线样式,并且在鼠标悬浮时进行显示。

先思考一下自己可以有哪些手段来实现,然后再来了解一下这里的实现手段吧:

阅读更多

css中的关系选择器

⚠️后代选择器和子代选择器比较常用,还有两个选择器需要记住

1
2
3
4
5
6
7
8
/* 后代选择器——典型用单个空格(" ")字符——组合两个选择器 */
body article p
/* 子代关系选择器是个大于号(>),只会在选择器选中直接子元素的时候匹配 */
article > p
/* 邻接兄弟选择器(+)用来选中恰好处于另一个在继承关系上同级的元素旁边的物件,只能是邻接 */
p + img
/* 通用兄弟选择器(~)用来选中,一个元素后的兄弟元素,即使它们不直接相邻,在前面选不到 */
p ~ img

Flex布局解析

Flex布局是什么

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

阅读更多