专栏名称: SegmentFault思否
SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
码农翻身  ·  中国的大模型怎么突然间就领先了？ ·  昨天  
程序猿  ·  41岁DeepMind天才科学家去世：长期受 ... ·  2 天前  
程序员的那些事  ·  印度把 DeepSeek ... ·  3 天前  
OSC开源社区  ·  升级到Svelte ... ·  5 天前  
程序员的那些事  ·  成人玩偶 + ... ·  6 天前  
51好读  ›  专栏  ›  SegmentFault思否

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

SegmentFault思否  · 公众号  · 程序员  · 2017-11-13 08:00

正文

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

1、利用 CSS 的 content 属性 attr 抓取资料

需求

鼠标悬浮实现一个提示的文字，类似github的这种，如图：

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

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

  1.  data-msg="Open this file in Github Desktop">  
  2. hover

  1. div{
  2. width:100px;
  3. border:1px solid red;  
  4. position:relative;
  5. }
  6. div:hover:after{
  7. content:attr(data-msg);
  8. position:absolute;
  9. font-size: 12px




    
;
  10. width:200%;
  11. line-height:30px;
  12. text-align:center;
  13. left:0;
  14. top:25px;
  15. border:1px solid green;
  16. }

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

最终效果

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

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

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

这样做很方便。

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

需求

让表单检验变得简单优雅，不需要写冗长的 JS 代码来校验设置样式

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

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

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

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

代码 

  1.  
     class="container">
  2.     
     class="row" style="margin-top: 2rem;">
  3.       
  4.         
     class="form-group">
  5.           name
  6.            type="text" required placeholder="请输入名称">
  7.         




    

  8.         
     class="form-group">
  9.           email
  10.            type="email" required placeholder="请输入邮箱">
  11.         
  12.         
     class="form-group">
  13.           homepage
  14.            type="url" placeholder="请输入博客url"




    
>
  15.         
  16.         
     class="form-group">
  17.           Comments
  18.           
  19.         
  20.       
  21.     
  22.   
  1. .valid {
  2.   border-color: #429032;
  3.   box-shadow: inset 5px 0 0 #429032;
  4. }




    

  6. .invalid {
  7.   border-color: #D61D1D;
  8.   box-shadow: inset 5px 0 0 #D61D1D;
  9. }
  11. .form-group {
  12.   width: 32rem;
  13.   padding: 1rem;
  14.   border: 1px solid transparent;
  15.   &:hover {
  16.     border-color: #eee;
  17.     transition: border .2s;
  18.   }
  19.   label {




    

  20.     display: block;
  21.     font-weight: normal;
  22.   }
  23.   input,
  24.   textarea {
  25.     display: block;
  26.     width: 100%;
  27.     line-height: 2rem;
  28.     padding: .5rem .5rem .5rem 1rem;
  29.     border: 1px solid #ccc;
  30.     outline: none;
  31.     &:valid {
  32.       




    
@extend .valid;
  33.     }
  34.     &:invalid {
  35.       @extend .invalid;
  36.     } 
  37.   }
  38. }

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

最终效果

3、利用 nth-of-type 选择某范围内的子元素

需求

table表格红绿相间，显示的更加直观

代码 

  2.   
  3.     
  4.       




    

  5.     
  6.     
  7.       
  8.     
  9.     
  10.       
  11.     
  12.     
  13.       
  14.     
  15.     
  16.       
  17.     
  18.     
  19.       




    

  20.     
  21.   
    23. 1
    2
    3
    4
    5
    6
  1. tbody tr:nth-of-type(2n){  
  2. background-color: red;
  3. }
  5. tbody tr:nth-of-type(2n+1){
  6. background-color: green;
  7. }

最终效果

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

  1. table tr:nth-child(n+5):nth-child(-n+10) {
  2.     background-color: red;
  3. }

4、让文字像古诗一样竖着呈现

需求

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

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

代码

writing-mode 这个 CSS 属性，我们是不是很少见到，很少用到！我们往往称不常见的东西为“生僻”，就像是不常见的文字我们叫“生僻字”，因此不常见的 CSS 属性，我们可以叫做“生僻属性”， writing-mode 给我们的感觉就是一个“生僻属性”，很弱，可有可无。这个属性可以追溯到 IE5.5 时代，兼容性是相当好的。 

  1. 咏柳
  2. 碧玉妆成一树高，
    万条垂下绿丝绦。
    不知细叶谁裁出，
    二月春风似剪刀。
  4.  class="verticle-mode">
  5.     
    咏柳
  6.     




    

    碧玉妆成一树高，
    万条垂下绿丝绦。
    不知细叶谁裁出，
    二月春风似剪刀。
    1. .verticle-mode {
    2.     writing-mode: tb-rl;
    3.     -webkit-writing-mode: vertical-rl;      
    4.     writing-mode: vertical-rl;
    5. }
    6. /* IE7比较弱，需要做点额外的动作 */
    7. .verticle-mode {




    

    8.     *width: 120px;
    9. }
    10. .verticle-mode h4,
    11. .verticle-mode p {
    12.     *display: inline;
    13.     *writing-mode: tb-rl;
    14. }
    15. .verticle-mode h4 {




    

    16.     *float:right;
    17. }
    最终效果
    更多细节与讨论请移步张鑫旭老师的这篇文章：改变CSS世界纵横规则的writing-mode属性
    5、实现鼠标悬浮内容自动撑开的过渡动画
    需求
    需要为一个列表添加个动画，容器的高度是不确定的，也就是高度为 auto，悬浮时候撑开内容有个过渡动画
    如下图所示：
    




    

    而用 CSS3 实现的话，由于高度的不确定，而 transtion 是需要具体的树枝，所以设置 height:auto 是无法实现效果的，可以通过 max-height 这个属性间接的实现这么个效果， css 样式是这样的：
    代码
      •   
      •     
         class="hd"> 列表1 
      •     




    

         class="bd">列表内容
        内容列表内容
        内容列表内容
        内容
      •   
      •   
      •     
         class="hd"> 列表1 
      •     
         class="bd">列表内容
        




    
        内容列表内容
        内容列表内容
        内容
      •   
      •   
      •     
         class="hd"> 列表1 
      •     
         class="bd">列表内容
        内容列表内容
        内容列表内容
        内容
      •   




    

    1. .bd {
    2.   max-height:0;
    3.   overflow:hidden;
    4.   transition: all 1s ease-out;
    5. }
    6. li:hover .bd {
    7.   max-height: 600px;




    

    8.   transition-timing-function: ease-in;
    9. }
    最终效果
    跟前面 GIF 差不多，这里就不录 GIF 了，有兴趣的可以自己尝试感受一下
    6、利用 pointer-events 禁用 a 标签事件效果
    需求：
    在做 tab 切换的时候，当选中当前项，禁用当前标签的事件，只有切换其他 tab 的时候，才重新请求新的数据。
    pointer-events




    
 是一个用于 HTML 指针事件的属性。
    pointer-events 可以禁用 HTML 元素的 hover/focus/active 等动态效果。
    默认值为 auto，语法： pointer-events:auto|none|visiblepainted|visiblefill|visiblestroke|visible|painted|fill|stroke|all;
    代码
    1.  
    1.    .active{
    2.          pointer-events: none;
    3.      }
    最终效果
    好像没什么效果😂
    7、CSS 如何实现文字两端对齐
    需求
    红框所在的文字有四个字的、三个字的、两个字的，如果不两端对齐可以选择居中对齐，或者右对齐。但是如果要想文字两端对齐呢？




    

    代码
    1. 姓名
    2. 手机号码
    3. 验证码
    4. 账号




    

    5. 密码
    1. div{
    2. margin:10px 0; 
    3. width:100px;
    4. border:1px solid red;
    5. text-align-last: justify;
    6. }




    

    最终效果
    8、使用 :not() 去除导航上不需要的属性
    需求
    有时候导航栏需要之间需要用逗号,进行隔离，但是最后一个不需要
    代码
      1.  class="nav">
    2.   




    

    3. a
    4.   
    5. b
    6.   
    7. c
    8.   
    9. d
    10.   
    11. e




    

    1. li{
    2. list-style:none;
    3. margin-bottom:10px;
    4. display:inline-block;
    5. }
    7. ul > li:




    
not(:last-child)::after {
    8.   content: ",";
    9. }
    当然，你可以使用 .nav li+li(不包括第一个li) 或者 .nav li:first-child~li(不包括最后一个li)， 但是使用 :not() 的意图特别清晰， CSS选择器按照人类描述它的方式定义边框。
    最后效果
    或者，你已经学习了一些关于 使用 :not()，你还可以尝试：
    1. /* 选择1到3的元素并显示 */




    

    2. li:not(:nth-child(-n+3)){
    3.   display: none;
    4. }
    9、移动web页面支持弹性滚动
    需求
    在IOS机型中，非body元素的滚动条会非常不流畅，又不想用JS模拟滚动条。
    传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动 web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型尤其是 IOS




    
 机型不支持弹性滚动，从而在开发中制造了所谓的 BUG。
    代码
    1. body{
    2. -webkit-overflow-scrolling: touch; /* ios5+ */
    3. }
    4. ele{
    5. overflow:auto;
    6. }
    -webkit-overflow-scrolling




    
属性具有继承效果，所以在 body 上设置即可，这样局部滚动条就非常的流畅了。
    最终效果
    所有滚动条都相当的流畅了
    10、美化浏览器自带的 radio ， checkbox 属性
    需求
    设计师：你那个单选框按钮好丑啊，跟我的设计稿差好远。程序员：我有什么办法，浏览器就是这样的。。。
    记得刚开始写页面时候，被浏览器各种默认的 UI 样式恶心到了，当初确实也没啥办法，反正也不影响功能，就那样吧。
    先讲一下原理：checkbox hack技术
    我们使用 CSS




    
 一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。然后通过一些简单的扩展，我们可以不使用任何 JavaScript 代码实现类似：自定义的单复选框，“更多”展开与收起效果，选项卡切换效果，或是多级下拉列表效果等等。
    相信很多前端开发人员都会遇到 boss 让修改 checkbox 和 radio 样式，毕竟自带的样式太丑了。后来我们发现修改自带样式并不是那么容易，最后直接使出杀手锏——点击之后替换图片。
    今天教大家一种方法，不用替换图片，随意修改样式。
    先讲一下原理：两个关键东东，一是伪类选择器 :checked，表示对应控件元素（单选框或是复选框）选中时的样式；二就是加号 + 相邻兄弟选择器，这个符号表示选择后面的兄弟节点。于是，两者配合，就可以轻松自如控制后面元素的显示或者隐藏，或是其他样式了。
    而如何让单复选框选中和不选中了，那就是 label 标签了哈， for 属性锚定对应的单选框或是复选框，然后点击这里的 label 标签元素的时候，对应的单复选框就会选中或是取消选中。然后，就有上面的效果啦！
    代码
    这里只给一个 radio




    
 单选框的代码,仅供参考:
    1.  class="radio-beauty-container">
    2.     
    3.          class="radio-name">前端工程师
    4.          type="radio" name="radioName" id="radioName1" hidden/>
    5.         




    

    6.     
    7.     
    8.          class="radio-name">后端工程师
    9.          type="radio" name="radioName" id="radioName2" hidden/>




    

    10.         
    11.     
    12.     
    13.          class="radio-name">全栈工程师
    14.          type="radio" name="radioName" id="radioName3"




    
 hidden/>
    15.         
    16.     
    1. .radio-beauty-container {
    2.     font-size: 0;
    3.     $bgc: green;
    4.     %common {




    

    5.         padding: 2px;
    6.         background-color: $bgc;
    7.         background-clip: content-box;
    8.     }
    9.     .radio-name {
    10.         vertical-align: middle;
    11.         font-size: 16px;
    12.     }






请到「今天看啥」查看全文


推荐文章
码农翻身  ·  中国的大模型怎么突然间就领先了？
昨天
程序猿  ·  41岁DeepMind天才科学家去世：长期受抑郁困扰、曾诉AI工作压力太大、为利润而工作
2 天前
程序员的那些事  ·  印度把 DeepSeek 告上法庭！三哥的“既要又要”病又犯了？
3 天前
OSC开源社区  ·  升级到Svelte 5后，我不会再用Svelte开发新项目
5 天前
程序员的那些事  ·  成人玩偶 + DeepSeek等大模型杀疯啦！中国制造的王炸组合，彻底征服欧美宅男
6 天前
宝马客  ·  【今日毒药】生活，每天都需要清晰的方向和前行的速度
8 年前
新闻哥  ·  叫他老师从来不理你，一叫“帅哥”就回头！逗比老师欢乐多！
8 年前
OSC开源社区  ·  爱你们，新年快乐｜OSChina 新年乱弹
8 年前
此间少年  ·  什么样的心态会让你感觉不到幸福？ ​​​​
8 年前
意林  ·  刘昊然送了王俊凯这份礼物，一旁的张一山笑而不语
8 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!