2

これに似た質問が何度も聞かれたことは知っていますが、特定の質問に対する答えが見つかりませんでした。非常によく似ているが、ただ異なるだけのCSSセレクターがたくさんある場合、それらをネストまたはグループ化するにはどうすればよいですか。

これが私がやろうとしていることです。

 #cell-left {
  background-color:#DDDDDD; 
    border:2px solid;
    height:400px;
    margin:20px 10px 0px 32px; 
    padding: 40px 15px 15px 15px;
    text-align:center; 
 }
 #cell-center {
  background-color:#DDDDDD;
    border:2px solid; 
    height:400px;
    margin:20px 10px 0px 10px; 
    padding: 40px 15px 15px 15px;
    text-align:center; 
 }
 #cell-right {
  background-color:#DDDDDD;
    border:2px solid; 
    height:400px;
    margin:20px 32px 0px 20px;
    padding: 40px 15px 15px 15px; 
    text-align:center; 
 }
 #row {
  width:100%;
    margin-top:0px;
 }

ご覧のとおり、すべてのセルは互いに非常に共通しており、マージンがわずかに異なります。すべてのセルをまったく同じようにして、CSSにマージンだけを付けて.right、.center、.leftを追加し、多くのコードを削減する方法があることを私は知っています。

回答ありがとうございます。

4

5 に答える 5

2

重複するプロパティを含むセルクラスを作成し、それを各DOM要素に追加します。

CSS

.cell{
   background-color:#DDDDDD; 
   border:2px solid;
   height:400px;
   padding: 40px 15px 15px 15px;
   text-align:center; 
}

#cell-left{
    margin:20px 10px 0px 32px; 
}

#cell-center {
    margin:20px 10px 0px 10px; 
}

#cell-right {
    margin:20px 32px 0px 20px;
 }

HTML

<div id="cell-left" class="cell">Something</div>
<div id="cell-right" class="cell">Something</div>
<div id="cell-center" class="cell">Something</div>

例： http： //jsfiddle.net/hKLMj/

于 2013-01-03T00:57:52.417 に答える
2

左、中央、右のセルが1つしかない場合は、 idで問題ありません。

それ以外の場合は、クラスを使用します。id -sは一意である必要があり、ページ上に同じIDを持つ2つの要素を含めることはできないためです。

これがCSSの短縮版です。あなたのcell-sはある種の子なので（それらがクラス付き<td>の-sであると仮定しましょう）-クラスを使用する必要はありません。これにより、マークアップがよりクリーンになります。<tr>.row

tr.row td {
   background-color: #ddd; 
   border: 2px solid;
   height: 400px;
   padding: 40px 15px 15px 15px;
   text-align:center; 
   margin:20px 10px 0px 10px;
}

また、それらが3つある場合はrow、左右を定義するためにクラスを使用する必要はありません。

tr.row td:first-child {
    margin:20px 10px 0px 32px; /* left cell */
}

tr.row td:last-child {
    margin:20px 32px 0px 20px; /* right cell */
}

そして、HTMLは

<tr class="row">
    <td> left cell </td>
    <td> center cell </td>
    <td> right cell </td>
</tr>

デモ

于 2013-01-03T01:05:29.600 に答える
1

クラスを使用することをお勧めします。これが、必要なものをグループ化する唯一の方法です。ちなみに、同じセルと行がいくつかあるページがあると思いますよね？

（ご存知だと思いますが、場合：同じページで同じIDを2回使用することは非常に悪い習慣です。クラスは同じページで複数回使用されることを意味します。IDは1回だけ使用されることを意味します/ページ。

あなたはこれを行うことができます ：

.cell {
  background-color:#DDDDDD; 
  border:2px solid;
  height:400px;
  padding: 40px 15px 15px 15px; 
  text-align:center; 
}
.cell-left {
  margin:20px 10px 0px 32px; 
}
.cell-center {
  margin:20px 10px 0px 10px; 
}
.cell-right {
  margin:20px 32px 0px 20px;
}
.row {
 width:100%;
 margin-top:0px;
}

そしてあなたのHTMLであなたはこれをします

<table border="1">
    <tr class="row">
        <td class="cell cell-left">row 1, cell 1</td>
        <td class="cell cell-right">row 1, cell 2</td>
    </tr>
    <tr class="row">
        <td class="cell cell-left">row 2, cell 1</td>
        <td class="cell cell-right">row 2, cell 2</td>
    </tr>
</table>

クラスを連鎖させることができます

于 2013-01-03T01:01:42.653 に答える
0

CSSはグループ化またはネストをサポートしていません。現在、一部のCSSコンパイラ（LESS、SASSなど）は、「ミックスイン」やその他の巧妙なトリックだけでなく、そのような概念もサポートしています。

..ただし、一致するすべてのCSSルールが適用されることに注意してください。セレクターの特異性と宣言の順序は、どの値が他の値をオーバーライドするかを決定するだけです。したがって、クラスや他のhullabalooなしで：

#cell-left, #cell-center, #cell-right, #row {
    background-color:#DDDDDD; 
    border:2px solid;
    height:400px;
    padding: 40px 15px 15px 15px; 
}
#cell-left, #cell-center, #cell-right {
    text-align: center;
}

#cell-left {
    margin:20px 10px 0px 32px; 
}
#cell-center {
    margin:20px 10px 0px 10px; 
}
#cell-right { 
    margin:20px 32px 0px 20px;
}
#row {
    width:100%;
    margin-top:0px;     
}

さて、クラスまたはよりクリーンなマークアップを使用することは有益かもしれませんが（特にそうすることでメンテナンスが容易になる場合）、上記は最初の投稿と同じ結果を達成します。YMMV。

于 2013-01-03T01:12:44.103 に答える
0

ダブルクラスセレクターを使用する方が意味的に正しいでしょう：

.cell {
    background-color: #DDDDDD; 
    border: 2px solid;
    height: 400px;
    padding: 40px 15px 15px 15px;
    text-align: center; 
}
.cell.left {
    margin: 20px 10px 0px 32px; 
}
.cell.center {
    margin: 20px 10px 0px 10px; 
}
.cell.right {
    margin: 20px 32px 0px 20px;
}

このようにして、次のように書くことができます。

<div class="cell left">Something</div>
<div class="cell center">Something</div>
<div class="cell right">Something</div>

あるいは：

<div class="left cell">Something</div>
<div class="center cell">Something</div>
<div class="right cell">Something</div>
于 2016-04-28T23:08:37.150 に答える