CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

Tech Neo技术沙龙 | 11月25号，九州云/ZStack与您一起探讨云时代网络边界管理实践

之前不久，由于自己平时涉猎还算广泛，总结了一篇博客： 这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已 ，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS的一些黑魔法小技巧，无奈我 CSS 一直很渣，没什么干货，最近写了一个 Chrome 插件 GayHub，算是把 GitHub 的样式审查了个变，在写的过程中，也收获了很多关于 CSS 的小技巧，尤其是开始的第一个技巧，学习到了很多，于是再加上一波搜集，就诞生这篇博文，欢迎补充~~~:joy:。

1、利用 CSS 的 content 属性 attr 抓取资料 需求 鼠标悬浮实现一个提示的文字，类似github的这种，如图：

想必大家都想到了伪元素 after ，但是文字怎么获得呢，又不能用 JavaScript 。

CSS 的伪元素是个很強大的东西，我们可以利用他做很多运用，通常为了做一些效果， content:" " 多半会留空，但其实可以在里面写上 attr 抓资料哦！

<div data-msg="Open this file in Github Desktop"> hover </div> div{ width:100px; border:1px solid red; position:relative; } div:hover:after{ content:attr(data-msg); position:absolute; font-size: 12px; width:200%; line-height:30px; text-align:center; left:0; top:25px; border:1px solid green; }

在 attr 里面塞入我们在 html 新增的 data-msg 属性，这样伪元素 (:after) 就会得到该值。

最终效果

同样的，你还可以结合其他强大的选择器使用，例如： 使用属性选择器选择空链接

显示没有文本值但是 href 属性具有链接的 a 元素的链接：

a[href^="http"]:empty::before { content: attr(href); }

这样做很方便。

2、利用用 :valid 和 :invalid 来做表单即时校验 需求 让表单检验变得简单优雅，不需要写冗长的 JS 代码来校验设置样式

html5 丰富了表单元素，提供了类似 required , email , tel 等表单元素属性。同样的，我们可以利用 :valid 和 :invalid 来做针对html5表单属性的校验。

:required  伪类指定具有required 属性的表单元素

:valid  伪类指定一个通过匹配正确的所要求的表单元素

:invalid  伪类指定一个不匹配指定要求的表单元素

代码 <div class="container"> <div class="row" style="margin-top: 2rem;"> <form> <div class="form-group"> <label>name</label> <input type="text" required placeholder="请输入名称"> </div> <div class="form-group"> <label>email</label> <input type="email" required placeholder="请输入邮箱"> </div> <div class="form-group"> <label>homepage</label> <input type="url" placeholder="请输入博客url"> </div> <div class="form-group"> <label>Comments</label> <textarea required></textarea> </div> </form> </div> </div> .valid { border-color: #429032; box-shadow: inset 5px 0 0 #429032; } .invalid { border-color: #D61D1D; box-shadow: inset 5px 0 0 #D61D1D; } .form-group { width: 32rem; padding: 1rem; border: 1px solid transparent; &:hover { border-color: #eee; transition: border .2s; } label { display: block; font-weight: normal; } input, textarea { display: block; width: 100%; line-height: 2rem; padding: .5rem .5rem .5rem 1rem; border: 1px solid #ccc; outline: none; &:valid { @extend .valid; } &:invalid { @extend .invalid; } } }

更多伪元素技巧可以参看这篇文章：你不知道的CSS

最终效果

3、利用 nth-of-type 选择某范围内的子元素 需求 table表格红绿相间，显示的更加直观 代码 <table> <tbody> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> </tbody> </table> tbody tr:nth-of-type(2n){ background-color: red; } tbody tr:nth-of-type(2n+1){ background-color: green; } 最终效果