1

私はこのようなものを持っています:

<div id="attributes1"><span class="heading_fieldset"></div>
<div id="attributes2"><span class="heading_fieldset"></div>

と

#attributes1 .heading_fieldset {
    display:inline-block;
    width: 30px;
}
#attributes2 .heading_fieldset {
    display:inline-block;
    width: 30px;
}

CSSを次のようにグループ化するにはどうすればよいですか（次のCSSは良くありません...ページが台無しになります）：

#attributes1, #attributes2 .heading_fieldset {
    display:inline-block;
    width: 30px;
}

ありがとうございました

4

3 に答える 3

4

以下を使用します。

#attributes1 .heading_fieldset, #attributes2 .heading_fieldset {
    display:inline-block;
    width: 30px;
}

プロパティを要素に追加しようとしました: #attributes1、および.heading_fieldsetの親を持つ#attributes2。

あなたがやろうとしていることの完全なコンテキストがわからないので、これはうまくいかないかもしれ.heading_fieldsetませんが、親を選択することなく、それらのプロパティを適用することができます. これにより、冗長性の一部が削減されます。

于 2013-10-20T02:06:16.683 に答える
1

この場合、クラスを使用します

HTML:

<div class="attributes"><span class="heading_fieldset"></div>
<div class="attributes"><span class="heading_fieldset"></div>

CSS:

.attributes > .heading_fieldset {
    display:inline-block;
    width: 30px;
}

ただし、IDが本当に必要な場合は、使用してください

<div id="attributes1" class="attributes"><span class="heading_fieldset"></div>
<div id="attributes2" class="attributes"><span class="heading_fieldset"></div>

繰り返しかもしれませんが、私はひどい読みにくいスタイルシートよりもその方が好きです

于 2013-10-20T02:16:33.593 に答える
1

クラスにもこだわるべきだと思います。JavaScript インタラクションまたは特別なもののために ID を保存します。このようにして.attribute、すべて同じようにスタイルを設定できます。その後.thing01、より具体的なスタイルを取得できます。スパンが閉じていないため、問題があります。また、実際に見出しである場合は、見出しマークアップを使用する必要があります。jsFiddle: - 本当に必要なのは、CSS を少し再考し、基本的に右から左に読むことを覚えておくことです。したがって、次のように書くと: .thing .other-thing h1 { }upi は、「これらのスタイルを .thing の内側にある .other-thing の内側にあるすべての h1 に適用する」と言っています。それが役立つことを願っています！


HTML

<div class="attribute thing01">
  <h2>Your heading</h2>
</div>

<div class="attribute thing02">
  <h2>Your heading</h2>
</div>


CSS

.attribute {
  display:inline-block;
  width: 30px;
  /* example CSS */
  border: 1px solid red;
  padding: .5em;
}

.thing01 {
  background-color: red;
}

.thing02 {
  background-color: lightblue;
}

.attribute h2 {
  font-size: 1.5em;
}
于 2013-10-20T04:19:15.257 に答える