实用Tips - 54 - 3个用 CSS 而不需 JS 的骚操作
本帖最后由 不二如是 于 2019-9-4 22:59 编辑最近 《零基础入门学习Web开发》（HTML5 & CSS3）进入了 CSS 部分，围观：传送门
废话不多说，直接说正题感受一下 CSS 的强大{:10_279:}
1、每个单词的首字母大写
例如有这么一段 html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C</title>
</head>
<body>
<p>ilovefishc.com</p>
</body>
</html>
一般人初学者看到这个需求，可能很容易就想到要用 JS 来实现。
于是绞尽脑汁写了一段 JS 代码：
function capitalizeFirst( str ) {
let result = '';
result = str.toLowerCase().replace(/( |^)/g, (L) => L.toUpperCase());
return result
}
写完可能还有点小骄傲，觉得能实现就行了。
其实呢，这个用 CSS 就能完美搞定：
<style>
p{
text-transform: capitalize;
}
</style>
text-transform 属性的详细用法，可以参看鱼C速查宝典：传送门
简单介绍一下它自带的参数：
[*]none： 默认。定义带有小写字母和大写字母的标准的文本
[*]capitalize： 文本中的每个单词以大写字母开头
[*]uppercase： 定义仅有大写字母
[*]lowercase： 定义无大写字母，仅有小写字母
上面用的就是 capitalize 首字母大写。
2、单选高亮
还是一段基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C</title>
</head>
<body>
<div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<span class="colors">世界地图</span>
</div>
</body>
</html>
用 JS 获取目标元素，然后设置颜色即可，用 CSS 轻松搞定：
<style>
.input:checked + .colors {
color: red;
}
</style>
两个选择器的区别：
[*]~ 选择器：查找某个元素后面的所有兄弟元素
[*]+ 选择器：查找某个元素后面紧邻的兄弟元素
这个技巧也完全可以使用在导航栏的交互效果，后续来实践一下。
3、多列等高
一段基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C</title>
</head>
<body>
<div class="form-css">
<input type="text" name="tel" placeholder="输入手机号码" pattern="^1\d{9}$" required><br>
<input type="text" name="smscode" placeholder="输入验证码" pattern="\d{4}" required><br>
<input type="submit" value="发送">
</div>
</body>
</html>
关于 input 的玩法，鱼油参看 P20 ：传送门
我们要实现当输入验证均合法时才弹出发送提交按钮。
上 CSS：
<style>
input:invalid ~ input {
display: none
}
</style>
**** Hidden Message *****
:invalid 伪类简要说明：
[*]valid 伪类，匹配通过 pattern 验证的元素
[*]invalid 伪类，匹配未通过 pattern 验证的元素
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） CSS 这么厉害，我要和小甲鱼好好学 CSS 这么厉害，我要和小甲鱼好好学 CSS 这么厉害，我要和小甲鱼好好学 CSS 这么厉害，我要和小甲鱼好好学 CSS 这么厉害，我要和小甲鱼好好学 CSS 这么厉害，我要和小甲鱼好好学 CSS 这么厉害，我要和小甲鱼好好学
页:
[1]