3

Gridster プラグインを使用しています。列幅は次のように定義されています。

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

これについて 2 つの質問があります。

  1. これらはどのような CSS クラスですか? 特にCSSでは、このようなことをしたことも見たこともありません。
  2. 1 から 12 までのすべての列を選択したい場合、どのようにコードを使用すればよいですか? 通常、私は次のようなものを使用してい[class*=".."] thisます。上記のシナリオでこのような形式を取得できるとは思いません。
4

1 に答える 1

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

デモはこちら

于 2013-04-21T08:48:29.813 に答える