Question

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

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

我对此有2个问题;

这些是什么类的CSS课程？我从未做过/见过这样的事情，特别是在CSS中。
如果我想从1-12中选择所有列，我该如何使用该代码？通常我使用[class*=".."] this之类的东西。我不这么认为我可以在上面的场景中得到这样的格式。

Answer 1

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

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

Demo Here

使用Gridster插件定位某些CSS类

1 个答案: