Question

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

Answer 1

您可以使用元素 - 属性选择器（fiddle）

.table-view > div[class=table-cell] {
  /* Styles goes here */
}

Answer 2

您可以将direct descendant selector与属性选择器结合使用，再次与class属性完全匹配。以下内容将匹配其父级为.table-view的所有元素，其中class属性正好为"table-cell"。

jsFiddle

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

或者，您可以使用:not() pseudo-class

执行此操作

jsFiddle

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

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

Answer 3

您可以使用：

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

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

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

请参阅this article on attribute selectors

选择单个类的HTML元素但不选择具有多个类的其他元素？

3 个答案: