4

.table-cell の子を持つコンポーネント .table-view があり、クラスをきれいに保ちたいとします。他のクラスを持たず、table-view の直接の子孫である .table-cell を選択するにはどうすればよいですか? ?

比較的新しい Webkit に実装されているあらゆる種類の高度なセレクターに対応しています。

<div class="table-view">
    <div class="table-cell">
       <!-- How to select this HTML element without selecting the others? -->
    </div>
    <div class="table-cell split">
        <div class="table-cell">

        </div>
        <div class="table-cell">

        </div>
    </div>
</div>
4

3 に答える 3

4

要素 - 属性セレクター（フィドル）を使用できます

.table-view > div[class=table-cell] {
  /* Styles goes here */
}
于 2013-05-03T07:25:28.143 に答える
2

直接の子孫セレクターを属性セレクターと組み合わせて使用​​して、属性を正​​確に再度一致させることができclassます。以下は、親が.table-viewclass 属性が正確に であるすべての要素に一致します"table-cell"。

jsフィドル

.table-view > [class="table-cell"] {
    background-color:red;
}

または、疑似クラスでこれを行うことができます :not()

jsフィドル

.table-view > .table-cell:not(.split)

これは、クラスを含まないが他のクラスを含む可能性がある.table-cell要素を考慮します。.split

于 2013-05-03T07:22:06.333 に答える
2

以下を使用できます。

div.table-view > div[class="table-cell"] {
    color: #f00;
}

つまり、クラスは「table-cell」と完全に一致し、余分なものはありません。

を使用することもできます[class*="table-cell"]。これは、class 属性のどこにでも含まれていることを意味するため、「table-cell-blargh」のクラスと一致します。^=(begins with) と(ends with) を使用することもでき$=、このメソッドを使用して任意の属性 (href など) を検索できます。

属性セレクターに関するこの記事を参照してください

于 2013-05-03T07:24:12.390 に答える