css - 使用 Gridster 插件定位某些 CSS 类

Question

我正在使用Gridster 插件，其中列宽定义如下：

[data-sizex="12"] { width: ... }
[data-sizex="11"] { width: ... }
[data-sizex="10"] { width: ... }
....

我对此有两个问题；

1. 这些是什么类型的 CSS 类？我从来没有做过/见过这样的事情，尤其是在 CSS 中。
2. 如果我想从 1-12 中选择所有列，我该如何使用代码？通常我使用类似[class*=".."] this. 我不认为我可以为上述情况获得这样的格式。

Answer 1

1) 这些是CSS 属性选择器，具体来说是属性存在和值选择器

2）如果您想选择所有列，您不必使用属性选择器，只需将 CSS 应用于元素。好吧，对于 gridster 插件，可以在演示 jsfiddle 中替换.grid为.gs_w { },.gs_w[data-sizex="12"]{ }等等。

.grid{
    /* Applies to all */
    background: #808080;
    color: #fff;
    border: 1px solid #eee; 
    padding: 5px 10px;
}

.grid[data-sizex="12"]{
    width: 720px;
}
.grid[data-sizex="11"]{
    width: 710px;
}
.grid[data-sizex="10"]{
    width: 700px;
}
.grid[data-sizex="9"]{
    width: 690px;
}
.grid[data-sizex="8"]{
    width: 680px;
}
.grid[data-sizex="7"]{
    width: 670px;
}
.grid[data-sizex="6"]{
    width: 660px;
}
.grid[data-sizex="5"]{
    width: 650px;
}
.grid[data-sizex="4"]{
    width: 640px;
}
.grid[data-sizex="3"]{
    width: 630px;
}
.grid[data-sizex="2"]{
    width: 620px;
}
.grid[data-sizex="1"]{
    width: 610px;
}

在这里演示