div class="box">

        
      
        ①        ②        ③      
    
    <script>      const oBox = document.getElementById("box");      const textArr = document.getElementsByClassName("text")      let i = 0;      let n = 800;      setInterval(()=>{        oBox.style.fontSize = n + "px";         n+=3         if(n > 800){            n = 10;            textArr[1].style.display = "none"            textArr[2].style.display = "none"            textArr[0].style.display = "none"            textArr[i].style.display = "block"            oBox.classList.remove("box1")            oBox.classList.remove("box2")            oBox.classList.remove("box3")            oBox.classList.add(`box${i}`)            i++            if(i > 2){              i = 0            }         }      },5)    </script>  

把文案改成 "◤ ◢ ✿" 就会出现第一个动图的效果啦!

所谓引号就相当于给书名加上"书名号", 给语言加上"冒号双引号", 当然他还有一些神奇玩法。

jojo的奇妙冒险

效果图:

这里要注意的是如果没写content: open-quote;会导致前后"书名号"都消失, 但是唯独没写content: close-quote;则会保留展示"《"。

当前这个基础写法也太鸡肋了, 不就是给"《"起了个别名叫open-quote吗? 并且关键是占用了我的before与after, 感觉画蛇添足, 比如我可以用如下的方法进行替换:

:root {    --open: "《";    --close: "》";  }  div::before {    content: var(--open);  }  div::after {    content: var(--close);  }

jojo的奇妙冒险

其实quotes的看家本领是它可以接受n个参数!

.box {    quotes: "--- start" "---- end" "《" "》";  }  .box::before {    content: open-quote;  }  .box:after {    content: close-quote;  }

        
jojo的奇妙冒险
        
Overlord
        
艾尔登法环
    

神奇的事情出现了, 当出现嵌套结构的时候, 内部的元素会使用第三个与第四个参数作为"引号",套娃事件出现啦:

.box {    quotes: "--- start" "---- end" "(" ")" "《" "》";  }  .box::before {    content: open-quote;  }  .box:after {    content: close-quote;  }

  
    jojo的奇妙冒险  
  
    Overlord  
  
    艾尔登法环  

说实话这个套娃能力还挺厉害的, 并且我们可以讲close-quote属性置空, 我想到的就是列表:

.box {    quotes: "--- start" "---- end" "1: " "" "-- 2:" "" "---- 3: " "" "------ 4: " "";  }  .box::before {    content: open-quote;  }  .box:after {    content: close-quote;  }

      
        第一:        
          第二:          
第三:
        
        
          第二:          
            第三:            
第四:
          
        
      
      
        第一:        
第二:
      
    

要注意不写close-quote会让css找不到在哪里结束, 所以最好写上并给空值。

CSS all 简写属性 将除了 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。

这是一个比较强硬的属性, 可以把几乎所有css属性进行重置:

我们先设置一下基础的环境：

.wrap {    font-size: 30px;    font-weight: 900;  }  .box {    width: 100px;    height: 100px;    border: 1px solid;    background-color: red;    color: white;  }  .box1 {    all: initial;  }  .box2 {    all: inherit;  }  .box3 {    all: revert;  }

    
      
你好
      
你好: initial
      
你好: inherit
      
你好: revert
    
  

顾名思义这里是将 div身上的所有属性都重置了, 不管是"背景颜色"还是"字体颜色", 甚至宽高, 所以这里属于是完全初始化了。

但是有个大坑, 他会把div原本的display: block改变成display: inline, 也就是说all: initial;将所有属性置为空了, 而不会根据标签属性进行筛选, 所以这个属性有点太绝对了要小心使用。

依然是顾名思义, 将所有属性设置为 "继承父级", 并且还原自身的属性, 比如宽高都没有了但是继承了字体大小与字体粗细

不是所有css属性的默认值都是"继承", 比如说position的默认值就不是集成, 但是position可以设置为position: inherit;, 这就埋下了隐患请看下一条属性。

虽然看起来效果与inherit几乎一样, 但是实质上有大区别, 比如如果此时wrap父元素设置position: absolute;, 那么设置了all: inherit的元素为position: absolute;, 设置了all:revert的元素是position: static, 也就是说目标元素单纯的还原成最开始的样式, 剔除掉了后期设置的属性, 但保留一些默认的继承属性, 这个属性虽然兼容性超差但最牛!

.box{    all: revert;    background-color: red;}

这里的背景色是可以设置成功的, 所以all应该算一锤子买卖, 只把设置all属性之前的样式重置。

// 父级  .box {    background-color: red !important;  } .box1 {   all: revert; }

上面是不生效的, 因为all只能重置优先级不如自己选择器的属性, 所以需要all: revert!important;。

这个属性让页面的url参数与dom元素互动起来

比如当前url是https://www.xxxxxxxxxxx.com/#target_id则:

:target {    background-color: red;    font-size: 200px;  }

    你好

我想到的是每次选中元素后让元素有个动画效果, 实在太简单了就不演示了, 说一下这个属性的鸡肋点吧, 比如无法同时传递多个id, 或者传递class, 并且他让css属性与dom结构之间绑定关系变弱了代码不方便维护与阅读。

可以设置当input组件中展示placeholder时的样式:

input:placeholder-shown {        background-color: lightblue;      }      input {        width: 300px;        height: 60px;      }

输入内容则还原

当英文单词必须折行时我们是否需要一个"连字符":

      The auto setting"s behavior depends on the language being properly tagged      so that the appropriate hyphenation rules can be selected.    
  .box {    border: 1px solid black;    width: 200px;    height: 100px;  }

主角暴风登场

.box {        border: 1px solid black;        width: 200px;        height: 100px;        hyphens: auto;      }

比较可惜的是无法自由定义"连字符"的样式, 否则一定有点有趣。

定义一个滚动时的"临时停顿点", 这个问题直接看gif动画比较直接:

简单来看就是每次惯性滑动都会停留在特定元素所在位置, 有点像滚动的"锚点":

              
      
11111
      
22222
      
33333
      
44444
      
55555
      
66666
    
  

scroll-snap-type: y mandatory;设置了y轴滚动时尽量停留在"元素点位"上, scroll-snap-align: start none;目标元素自身的滚动起始方向用来对齐, 也就是告诉浏览器滚动后要停留在子元素的哪里。

在子元素身上设置scroll-margin-top: 20px可以设置一定的检测距离, 并附加回弹效果:

这次神奇的css之旅就是这样, 希望与你一起进步。

关键词： 奇妙冒险 所有属性 动画效果 也就是说 顾名思义