css-特定用法

前言 今天我们大家介绍一些可能你乍一眼以为一定需要 JavaScript 才能完成的功能,其实 CSS 就能完成,甚至更加简单。

直接入题

每个单词的首字母大写

其实我第一次看到这个功能的时候就是使用 JS 去实现这个功能,想都没想 CSS 可以完成这个功能。马上就屁颠屁颠的写了一个方法:

1
2
3
4
5
function capitalizeFirst( str ) {
let result = '';
result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
return result
}

写完这个方法后,还有点小得意,也就没想其他方案。直到有一天看到 CSS 也能做这个功能的时候,我才反应过来明明一句 CSS 就能解决的问题,我却使用了更复杂的方案。 CSS 方案如下:

1
2
3
.capitalizeFirst-css {
text-transform: capitalize;
}

text-transform 简单介绍

这是 CSS2 中的属性,参数有 capitalize | uppercase | lowercase | none 参数介绍:

  1. none:默认。定义带有小写字母和大写字母的标准的文本。
  2. capitalize:文本中的每个单词以大写字母开头。
  3. uppercase:定义仅有大写字母。
  4. lowercase:定义无大写字母,仅有小写字母。

从这个属性我们可以知道全部大写(小写)的需求这个属性也能轻易实现。

2. 单选高亮

主要代码就是一段 CSS 代码:

1
2
3
4
5
6
7
8
9
.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>

两个选择器的区别

~选择器:查找某个元素后面的所有兄弟元素 +选择器:查找某个元素后面紧邻的兄弟元素

扩展

其实这个技巧也完全可以使用在导航栏的交互效果,个人觉得可以简化一部分工作。

3、多列等高问题

之前做 pc 端的客户画像需求时,遇到需要左右两边等到的需求(左边块的高度会随着内容变化)。 最初我使用的 JS 计算高度再赋值,可是这样会有页面闪动的效果。所以找到了两种 CSS 的处理方案:

  1. 每列设置一个很大的 padding,再设置一个很大的负的 margin
  2. 使用 display:table;

第一种有明显的缺陷:

  1. border-bottom 看不到了
  2. 设置的下方的两个圆角也不见了

所以我使用了 display:table; 的方式来实现等高,可以说非常的方便。 建议不要一味的抵触 table,有的场景还是可以使用的。

invalid 伪类和 vaild 伪类

  • valid 伪类,匹配通过 pattern 验证的元素
  • invalid 伪类,匹配未通过 pattern 验证的元素
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~