首页 > CSS怎么简写自有数字区别的代码呢???

CSS怎么简写自有数字区别的代码呢???

  1. 描述你的问题
    以下代码只有2,3,4,5不同的,在CSS中有什么通配符可以简写吗?怎么写一句代码呢???求专业人士给个方法

pre.hljs.json.mCustomScrollbar._mCS_2.mCS-autoHide,
pre.hljs.java.mCustomScrollbar._mCS_3.mCS-autoHide,
pre.hljs.java.mCustomScrollbar._mCS_4.mCS-autoHide,
pre.hljs.java.mCustomScrollbar._mCS_5.mCS-autoHide{
    background-color: rgb(26, 26, 26) !important;}

首先这四个选择器根本就不是只有2345的区别,还有json和java的区别……

其次,CSS不是这样用的,特化程度尽可能堆到满,然后再加一个important,还想要一个样式覆盖多种元素,二者不可能协调,这样疯狂的堆行数根本就没法维护。

特化程度是一个双刃剑。
特化程度越高,越不容易覆盖到多个元素,越容易覆写其他样式;
特化程度越低,越容易覆盖到多个元素,越不容易覆写其他样式。

打个比方,你是皇帝,需要用CSS选择器控制皇妃穿衣,于是你给出的是这样的话:
“胸口有个痣的刘姓的常在、胸口有个痣的张姓的贵人、胸口有个痣的刘姓的答应、胸口有个痣的刘姓的常在,请你们穿红色的衣服,必须得穿,谁说都没用。”
费尽口舌。

泛化的做法就是这样说:
“如果你的胸口有个痣,请你穿红色的衣服。”
轻轻松松。

如果是字体等可能继承的属性,利用继承性来做直接可以是:
“如果你住在广寒宫,请你穿红色的衣服。”
方便快捷。

不过LZ这样写出来代码,样式相互覆写已经不可收拾,所以要改只能全站来改。加油?


如果要切题,仅针对:

.mCS_2,
.mCS_3,
.mCS_4,
.mCS_5 { background: #FFC }

可以写成:

[class^="_mCS_"],
[class*=" _mCS_"] { background: #FFC }

再说一次,这是几乎没人用的做法,多定义一个CSS类的事情,非要搞得这么复杂。


用sass,语法如下:

@for $i from 2 to 5 {
    pre.hljs.json.mCustomScrollbar._mCS_#{$i}.mCS-autoHide {
      background-color: rgb(26, 26, 26) !important;
    }
  }

less或者sass


无解

不过你可以用less, scss等 css 预处理器来生成

【热门文章】
【热门文章】