Question

我在下面有这个CSS。如何缩短圆类列表？我希望能够说＆＃34; FROM .circle01 TO .circle23＆＃34;

 .circle01, .circle02, .circle03, .circle04, .circle05, .circle06, .circle07, .circle08, .circle09, .circle10,
        .circle11, .circle12, .circle13, .circle14, .circle15, .circle16, .circle17, .circle18, .circle19, .circle20,
        .circle21, .circle22, .circle23 {
            background-color: none;
            display: none;
            position: absolute;
            z-index: 20000;
            top: 255px; /*30*/ 
            width: 252px;
            left: 145px;
            height: 71px;
            pointer-events:none;
        }

在伪代码中，我想要类似的东西：

.circle01 to .circle23 {
       background-color: none;
        display: none;
        position: absolute;
        z-index: 20000;
        top: 255px; /*30*/ 
        width: 252px;
        left: 145px;
        height: 71px;
        pointer-events:none;
}

编辑，找到了解决方案：

        div[class^="circle"] {
            background-color: none;
            display: none;
            position: absolute;
            z-index: 20000;
            top: 255px; /*30*/ 
            width: 252px;
            left: 145px;
            height: 71px;
            pointer-events:none;
        }

Answer 1

您可以使用此属性选择器

[class^=circle]

匹配其class属性以circle开头的所有元素。

请注意，它也会与circlebar匹配，并且不会与shape circle01匹配。

或者这个

[class*=circle]

匹配其class属性包含circle

的所有元素

请注意，它也会匹配foocirclebar。

Answer 2

为每个圆圈添加班级圈，class =＆＃34; circle circle01＆＃34;，class =＆＃34; circle circle02＆＃34;等比：

.circle { 
        background-color: none;
        display: none;
        position: absolute;
        z-index: 20000;
        top: 255px; /*30*/ 
        width: 252px;
        left: 145px;
        height: 71px;
        pointer-events:none;
}

Answer 3

为每个人添加一个公共类，只需选择它们：

.circleCommon {
   background-color: none;
    display: none;
    position: absolute;
    z-index: 20000;
    top: 255px; /*30*/ 
    width: 252px;
    left: 145px;
    height: 71px;
    pointer-events:none;
}

您无法在CSS中使用范围。

Answer 4

您必须在CSS中包含每个圈子类名称。更好的方法是使用jQuery将类应用于.circle的第一个x

CSS类选择器范围

4 个答案: