当前位置: 首页 > 工具软件 > cssnext > 使用案例 >

css4的新特性 cssNext

周祺
2023-12-01

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); }   //特别浅的灰色,看起来像银色
 类似资料: