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

之前不久，因为本身日常平凡浏览还算广泛，总结了一篇博客：这些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 元素的链接：

如许做很便利。

2、应用用 :valid 和 :invalid 来做表单即时校验

需求

让表单考验变得简的暌高古，不须要写冗长的 JS 代率攀来校验设制揭捉?式

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

:required 伪类指定具有required 属性的表单位素
:valid 伪类指定一个经由过程匹拍┞俘确的所请求的表单位素
:invalid 伪类指定一个不匹配指定请求的表单位素

代码

<div>姓名</div><div>手机号码</div><div>验证码</div><div>账号</div><div>暗码</div>

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

最终效不雅

而若何让单复选框选中和不选中了，那就是 label 标签了哈， for 属性锚定对应的单选框或是复选框，然后点击这里的 label 标签元素的时刻，对应的单复选框就会选中或是撤消选中。然后，就有膳绫擎的效不雅啦！

代码

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的回到顶部，他的实现很简单，就是设置必定宽度让颇┞粉行，如不雅我要实现这种需求呢？

.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;    }   }}	
			 1/5    1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　对于未来互联网：AI创造了什么，毁灭了什么
            
            近日，国外研究机构Internet Society宣布了题为《Paths to Our Digital Future（2017）》（中文译为：通往数字将来之路）的申报，阐述了后互联网时代的变革驱动力，这里对变革驱动力之一人>>>详细阅读


本文标题：CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅
地址：http://www.17bianji.com/lsqh/37641.html
 1/2    1