4

假设我有一个组件 .table-view 有一个 .table-cell 子级，并且我想保持我的类干净，我如何选择一个没有其他类并且是 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

您可以使用：

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

这意味着该类与“table-cell”完全匹配，没有额外内容。

您也可以使用[class*="table-cell"]，这意味着它包含在类属性中的任何位置，因此它将匹配“table-cell-blargh”类。您也可以使用^=（开头）和$=（结尾），并且您可以使用此方法搜索任何属性（例如href）。

请参阅这篇关于属性选择器的文章

于 2013-05-03T07:24:12.390 回答
2

您可以将直接后代选择器与属性选择器结合使用，以再次完全匹配该class属性。以下将匹配其父.table-view级恰好是类属性所在的所有元素"table-cell"。

jsFiddle

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

或者，您可以使用 :not()伪类来执行此操作

jsFiddle

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

这将考虑.table-cell不包含.split该类但可能包含其他类的元素。

于 2013-05-03T07:22:06.333 回答