鱼C论坛

 找回密码
 立即注册
查看: 1260|回复: 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 代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C</title>
  6. </head>
  7. <body>
  8. <p>ilovefishc.com</p>
  9. </body>
  10. </html>
复制代码


一般人初学者看到这个需求,可能很容易就想到要用 JS 来实现。

于是绞尽脑汁写了一段 JS 代码:

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

写完可能还有点小骄傲,觉得能实现就行了。

其实呢,这个用 CSS 就能完美搞定:

  1. <style>
  2.         p{
  3.             text-transform: capitalize;
  4.         }
  5.     </style>
复制代码

Snip20190904_81.png


text-transform 属性的详细用法,可以参看鱼C速查宝典:传送门

简单介绍一下它自带的参数:

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

上面用的就是 capitalize 首字母大写。


2、单选高亮

还是一段基础代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C</title>
  6. </head>
  7. <body>
  8. <div class="single-check">
  9.     <input class="input" type="radio" name="colors" value="1">
  10.     <span class="colors">世界地图</span>
  11. </div>
  12. </body>
  13. </html>
复制代码

用 JS 获取目标元素,然后设置颜色即可,用 CSS 轻松搞定:

  1.     <style>
  2.         .input:checked + .colors {
  3.             color: red;
  4.         }
  5.     </style>
复制代码

Sep-04-2019 22-40-24.gif


两个选择器的区别:

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


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


3、多列等高

一段基础代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C</title>
  6. </head>
  7. <body>
  8. <div class="form-css">
  9.     <input type="text" name="tel" placeholder="输入手机号码" pattern="^1[3456789]\d{9}$" required><br>
  10.     <input type="text" name="smscode" placeholder="输入验证码" pattern="\d{4}" required><br>
  11.     <input type="submit" value="发送">
  12. </div>
  13. </body>
  14. </html>
复制代码

关于 input 的玩法,鱼油参看 P20 :传送门

我们要实现当输入验证均合法时才弹出发送提交按钮。

上 CSS:

  1. <style>
  2.         input[type="text"]:invalid ~ input[type="submit"] {
  3.             display: none
  4.         }
  5.     </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-3-28 17:51

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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