我正在使用 Gridster plugin ,其中列宽定义如下:
[data-sizex="12"] { width: ... }
[data-sizex="11"] { width: ... }
[data-sizex="10"] { width: ... }
....
我有两个问题;
- 这些是什么类型的 CSS 类?我从未做过/见过这样的事情,尤其是在 CSS 中。
- 如果我想选择 1-12 中的所有列,我该如何使用代码?通常我使用类似
[class*=".."] this
的东西。我不认为我可以为上述情况获得这样的格式。
最佳答案
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;
}
关于css - 使用 Gridster 插件定位某些 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16129179/