代码

writing-mode 这个 CSS 属性，我们是不是很少见到，很罕用到！我们往往称不常见的器械为“冷僻”，就像是不常见的文字我们叫“冷僻字”，是以不常见的 CSS 属性，我们可以叫做“冷僻属性”， writing-mode 给我们的感到就是一个“冷僻属性”，很弱，可有可无。这个属性可以追溯到 IE 5.5 时代，兼容性是相当好的。

pointer-events 可以禁用 HTML 元素的 hover/focus/active 等动态效不雅。

<h4>咏柳</h4><p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p><div class="verticle-mode">    <h4>咏柳</h4>    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>

.verticle-mode {    writing-mode: tb-rl;    -webkit-writing-mode: vertical-rl;          writing-mode: vertical-rl;}/* IE7比较弱，须要做点额外的动作 */.verticle-mode {    *width: 120px;}.verticle-mode h4,.verticle-mode p {    *display: inline;    *writing-mode: tb-rl;}.verticle-mode h4 {    *float:right;}

最终效不雅

如下图所示：

而用 CSS3 实现的话，因为高度的不肯定，而 transtion 是须要具体的树枝，所以设置 height:auto 是无法实现效不雅的，可以经由过程 max-height 这个属性借居的实现这么个效不雅， css 样式是如许的：

代码

<ul>  <li>    <div class="hd"> 列表1 </div>    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>  </li>  <li>    <div class="hd"> 列表1 </div>    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>  </li>  <li>    <div class="hd"> 列表1 </div>    <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>  </li></ul>

.bd {  max-height:0;  overflow:hidden;  transition: all 1s ease-out;}li:hover .bd {  max-height: 600px;  transition-timing-function: ease-in;}

最终效不雅

跟前面 GIF 差不多，这里就不录 GIF 了，有兴趣的可以本身测验测验感触感染一下

6、应用 pointer-events 禁用 a 标签事宜效不雅

需求：

在做 tab 切换的时刻，被选中当前项，禁用当前标签的事宜，只有切换其他 tab 的时刻，才从新请求新的数据。

pointer-events 是一个用于 HTML 指针事宜的属性。

默认值为 auto ，语法： pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;

代码

<ul>    <li>        <a class="tab" href=http://news.51cto.com/art/201709/"https://google.com">aaa        
         bbb    
    
        ccc     
    

.active{         pointer-events: none;     }

最终效不雅

似乎没什么效不雅:joy:

7、 CSS 若何实现文字两端对齐

需求

红框地点的文字有四个字的、三个字的、两个字的，如不雅不两端对齐可以选择居中对齐，或者右对齐。然则如不雅要想文字两端对齐呢？

代码

div{margin:10px 0; width:100px;border:1px solid red;text-align-last: justify;}

最终效不雅

8、应用 :not() 去除导航上不须要的属性

需求

有时刻导航栏须要之间须要用逗号,进行隔离，然则最后一个不须要

代码

<ul class="nav">  <li>a</li>  <li>b</li>  <li>c</li>  <li>d</li>  <li>e</li></ul>

li{list-style:none;margin-bottom:10px;display:inline-block;}ul > li:not(:last-child)::after {  content: ",";}

当然，你可以应用 .nav li + li (不包含第一个li) 或者 .nav li:first-child ~ li (不包含最后一个li)， 然则应用 :not() 的意图特别清楚， CSS 选择器按照仁攀类描述它的方法定义边框。

最后效不雅

　　推荐阅读

　　对于未来互联网：AI创造了什么，毁灭了什么

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

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

地址：http://www.17bianji.com/lsqh/37641.html

 1/2    1