用CSS替代JavaScript的实例精选

1. 每个单词的首字母大写

javaScript方法:

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

CSS 方案如下:

.capitalizeFirst-css {    text-transform: capitalize;}

text-transform 简单介绍

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

参数介绍:

none： 默认。定义带有小写字母和大写字母的标准的文本。

capitalize： 文本中的每个单词以大写字母开头。

uppercase： 定义仅有大写字母。

lowercase： 定义无大写字母，仅有小写字母。

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

2. 单选高亮

.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. 表单验证

input[type="text"]:invalid ~ input[type="submit"] {display: none}

<div class="form-css"><input type="text" name="tel" placeholder="输入手机号码" pattern="^1[3456789]\d{9}$" required><br><input type="text" name="smscode" placeholder="输入验证码" pattern="\d{4}" required><br><input type="submit" ></input></div>