前言
今天我们大家介绍一些可能你乍一眼以为一定需要 JavaScript 才能完成的功能,其实 CSS 就能完成,甚至更加简单。
具体代码已经发布在 gitHub 【https://github.com/wanqihua/blog】感兴趣的可以前往。
直接入题
1. 每个单词的首字母大写
其实我第一次看到这个功能的时候就是使用 JS 去实现这个功能,想都没想 CSS 可以完成这个功能。马上就屁颠屁颠的写了一个方法:
function capitalizeFirst( str ) {
let result = ;
result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
return result
}
写完这个方法后,还有点小得意,也就没想其他方案。直到有一天看到 CSS 也能做这个功能的时候,我才反应过来明明一句 CSS 就能解决的问题,我却使用了更复杂的方案。
CSS 方案如下:
.capitalizeFirst-css {
text-transform: capitalize;
}
是不是特别简单(代码在上面的 blog 仓库,访问 cssDo 路由便可,下面的案例都是这个路由下):
text-transform 简单介绍
这是 CSS2 中的属性,参数有 capitalize | uppercase | lowercase | none
参数介绍:
none:默认。定义带有小写字母和大写字母的标准的文本。
capitalize:文本中的每个单词以大写字母开头。
uppercase:定义仅有大写字母。
lowercase:定义无大写字母,仅有小写字母。
从这个属性我们可以知道全部大写(小写)的需求这个属性也能轻易实现。
2. 单选高亮
可能你看到“单选高亮”没反应过来,直接来张图片你就马上清楚了:
不知道你是否第一次看到这种单选高亮的需求时,是怎么处理的。我第一次直接是用 JS 控制的。后来我发现这个需求用 CSS 更方便处理。
主要代码就是一段 CSS 代码:
// 省略部分代码,详细代码看仓库
.input:checked + .colors {
border-color: #e63838;
color: #e63838;
}
<div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<div class="colors">天空之境</div>
</div>
看效果:
两个选择器的区别
~选择器
:查找某个元素后面的所有兄弟元素
+选择器
:查找某个元素后面紧邻的兄弟元素(这个选择器非常有用,有的时候可以完胜 JS 的实现方式)
扩展
其实这个技巧也完全可以使用在导航栏的交互效果,个人觉得可以简化一部分工作。
你的在看我当成喜欢