css4的新特性 cssNext

1、父元素选择器：$div>span

  例：.wrap>$div>span{color:red;}  此时样式会落在带有$的div身上

  例2：$ol>li:only-child{list-style:none;}  此时样式会落在只有一个li子元素的ol身上。

2、链接地址伪类：分割线//// :any-link（用于所有链接） :local-link（用于站内链接）

3、文本伪类：分割线//// :dir(ltr)从左到右 :dir(rtl)从右到左

  例：p:dir(rtl){font-size:20px;} 将会渲染成字体大小为20px，文本排列方向从右向左的一行文字。

4、组合映射选择器：分割线//// :matches()

  例：p:matches( :first-child , .main ){ color: red; }  结果 p:first-child , p.main{ color: red; }

  例2：label:matches(:hover,:focus) input{box-shadow:0px 0px 10px red;} 当label获取焦点或者hover时，相对应的input会被高亮。对应关系当然是for和id了。

5、ID属性匹配

  例：li:hover /data-type/ p{background-color:yellow;} 当li的data-type属性与p的id属性值相同时且当li处于hover状态下，对应的p会高亮。

6、wrap-flow:both;文字会在元素的四周包围。

7、围绕图形排列shape，仅在浮动元素上设置会生效

  例：.shape{float:left;shape-outside:circle(50%)} 此时文字会在图片的周围按照图片的轮廓曲线排列

8、包含元素选择器 :has

  例：table:has(tr:nth-of-type(11)){background-color:red} 若table元素内有超过10个tr，样式生效。

  例2：div:has(p:nth-child(28)) 若div内的第28个元素为p，该div被选中

9、不包含元素选择器 :not

  例：a:not(href*=['baidu'])  这样会选择所有链接中不包含baidu的链接

  例2：div:not([class|='W_content'],:has(img)) 将会选中所有class不是以W_content开头或W_content_开头并且子元素没有img的div

10、块级样式scoped

     例：此时style内的样式仅在div内部生效，即内部文字会变成红色

     <section>
         <h1>外部文字</h1>
         <div>
             <style scoped>
                 h1{
                     color:red;
                 }
             </style>
             <h1>内部文字</h1>
         </div>
     </section>

11、var()定义变量：定义变量只能在:root里面定义，定义变量的方法类似less和scss，因为@和$已经被less和scss占用了，所以使用‘–’作为变量的标识，使用var()调用

    :root {  --mainColor: red;  --commonColor: green; --fontSize: 1rem; }        

    a {  color: var(--commonColor); background-color: var(--mainColor); }     

    结果：a{  color:green;  background-color:red; }

12、定义代码块@apply：在：root内定义，标识符是 ’ – ’ ，@apply调用

    :root{ --centered{ display:flex; align-items:center; justify-content:center; } }  .centered{ @apply --contered; }

     结果：.centered{ display:flex; align-items:center; justify-content:center; }

13、calc函数

     例：.wrap{background-position:calc(100%-25px) calc(100%-25px)} 当你不知道容器的宽和高的时候，calc函数可以将背景图片定位到距离右下角25px的位置

     例2：body{ font-size: calc( var( --fontSize ) * 2 ); }   结果： body{ font-size: 2rem; }

14、blackness：用于颜色，向黑色加深。

     例：a{ color:color(red blackness(10%)); }   结果：a{ color: rgb(230, 0, 0) } //颜色加深了一点

     例2：a{ color:color(red blackness(80%)); }   结果：a{ color: rgb(51, 0, 0); } //已经很接近黑色了

15、alpha：用与颜色，用更清晰的方式改变透明度，rgba中的a

     例：a{ color: color(red alpha(-50%)); }   结果：a{ color: color: rgba(255, 0, 0, 0.5); }

16、gray()：灰度，值越大颜色越浅

     例：a{ color: gray(10); }   结果：a{ color:rgb(10,10,10); }   //特别深的灰色，看起来像黑色

     例2：a{ color: gray(200); }   结果：a{ color:rgb(200,200,200); }   //特别浅的灰色，看起来像银色

css4的新特性 cssNext

猜你喜欢