如何根据css中的子节点属性选择html元素？答案

【问题标题】：How to select an html element according to its child node attribute in css?如何根据css中的子节点属性选择html元素？
【发布时间】：2010-06-23 04:59:28
【问题描述】：

例如在下面的sn-p中：

<tr>
 <td align="center">123</td>
 <td class="someclass">abc</td>
</tr>

我想选择所有具有<td> 和class="someclass" 的<tr> 元素。

我想知道这是否可以在 css 中实现，而不使用 javascript。谢谢。

【问题讨论】：

请更清楚地定义sn-p。 123 abc 并不是您特定用例的真正有用示例。

标签： html css css-selectors

【解决方案1】：

您的要求是不可能的。 CSS 从左到右读取，这意味着您不能基于子属性指定父元素。您可以在 javascript 中执行此操作，但就像您说的那样，您不想使用它。

示例 HTML：

<div class="box">
    <div class="green">
       Some text
    </div>
</div>

<div class="box">
    <div class="red">
       Some Text
    </div>
</div>

示例 CSS：

.box {
    color: blue;
} 

.box .green {
    color: green;
}

.box .red {
    color: red;
}

如您所见，您可以单独选择父元素，但不能基于子元素的属性。

从技术上讲，您应该始终向外工作。如果您需要将特定样式应用于父级，则应该添加一个额外的类。

示例 HTML：

<div class="box green">
    Some Text
</div>

示例 CSS：

.box.green {
    color: green;
}

您可以在上面的 CSS 中看到，您可以“堆叠”类以选择合适的元素。

希望对您有所帮助，如果您有任何问题，请随时提出。如果您为此打开一个新主题，我可以发布一个 javascript 变体，它能够根据子元素属性选择一个元素。

【讨论】：

【解决方案2】：

选择具有特定类的元素：

.someclass{
  color: red;
}

【讨论】：

【解决方案3】：

我想选择所有符合有一个 with 类属性 “某类”。

如果选择是指节点选择，则只能使用 JavaScript。

jQuery:

$(".someclass").doStuff();

但如果选择是指 CSS 选择，那么：

CSS：

<element class="someclass"> 可以在 CSS 中使用 .someclass 选择。

【讨论】：