css - 通过了解父类来定位子 id el

Question

我有一个有几个孩子的 CSS 类，我知道我想要定位的孩子元素有一个以 ' 结尾的 id inner-Ct。我不想为它分配我的唯一 ID，因为它将在许多地方使用。

<div class="totalSummary">
    <div>
        <div id = "form-1406-innerCt"></div> //<---- this is the one I want to target
          ...
    <div>
</div>

有没有办法使用css做到这一点？

Answer 1

您可以使用$属性选择器来匹配 ID 的结尾，例如：

.totalSummary div[id$="innerCt"] {
    background: red;
}

jsFiddle 示例

见：http ://www.w3.org/TR/selectors/#selectors

[att$=val] 表示具有 att 属性的元素，其值以后缀“val”结尾。如果 "val" 是空字符串，则选择器不代表任何内容。

Answer 2

你可以使用类似的东西：

.totalSummary div[id$="innerCT"] {
    color: gold;  /* The $ indicates a string that an attribute
                     value ends with, in this case "innerCt" */
}

示例：http: //jsfiddle.net/xgRk7/