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

Question

我正在使用 Gridster plugin ，其中列宽定义如下:

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

我有两个问题；

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

Answer 1

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

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

.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;
}

Demo Here