鱼C论坛

 找回密码
 立即注册
查看: 1566|回复: 7

[庖丁解牛] 实用Tips - 54 - 3个用 CSS 而不需 JS 的骚操作

[复制链接]
发表于 2019-9-4 22:13:31 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2019-9-4 22:59 编辑

最近 《零基础入门学习Web开发》(HTML5 & CSS3)进入了 CSS 部分,围观:传送门

废话不多说,直接说正题感受一下 CSS 的强大


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(/( |^)[a-z]/g, (L) => L.toUpperCase());
 return result
} 
写完可能还有点小骄傲,觉得能实现就行了。

其实呢,这个用 CSS 就能完美搞定:
 <style>
        p{
            text-transform: capitalize;
        }
    </style>
Snip20190904_81.png


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>
Sep-04-2019 22-40-24.gif


两个选择器的区别:

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


这个技巧也完全可以使用在导航栏的交互效果,后续来实践一下。


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[3456789]\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[type="text"]:invalid ~ input[type="submit"] {
            display: none
        }
    </style>
游客,如果您要查看本帖隐藏内容请回复


:invalid 伪类简要说明:

  • valid 伪类,匹配通过 pattern 验证的元素
  • invalid 伪类,匹配未通过 pattern 验证的元素





                               
登录/注册后可看大图


如果喜欢,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +6 收起 理由
我叫什么啊 + 5 + 5 + 3 无条件支持楼主!
睦ちゃん她爹 + 5 + 5 + 3

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-9-6 17:43:33 | 显示全部楼层
CSS 这么厉害,我要和小甲鱼好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-9-13 19:33:09 | 显示全部楼层
CSS 这么厉害,我要和小甲鱼好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-12-30 15:00:45 | 显示全部楼层
CSS 这么厉害,我要和小甲鱼好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-29 21:42:35 | 显示全部楼层
CSS 这么厉害,我要和小甲鱼好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-31 09:18:01 | 显示全部楼层
CSS 这么厉害,我要和小甲鱼好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-16 19:46:40 From FishC Mobile | 显示全部楼层
CSS 这么厉害,我要和小甲鱼好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-6 10:23:47 | 显示全部楼层
CSS 这么厉害,我要和小甲鱼好好学
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 04:28

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表