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

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> <div> <form> <div> <label>name</label> <input type="text" required placeholder="请输入名称"> </div> <div> <label>email</label> <input type="email" required placeholder="请输入邮箱"> </div> <div> <label>homepage</label> <input type="url" placeholder="请输入博客url"> </div> <div> <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; } 最终效果

你也这样来做，选择5-10的子元素。

table tr:nth-child(n+5):nth-child(-n+10) { background-color: red; } 4、让文字像古诗一样竖着泛起 需求

有时候，需要容器的文字从上到下摆列，而不是从左往右摆列，如图所示：

这是segmentfault的回到顶部，他的实现很简单，就是设置必然宽度让其折行，如果我要实现这种需求呢？

代码