Question

<table>
    <tr class="here"><td><input type="text" readonly=readonly></td></tr>
    <tr class="here"><td><input type="text" readonly=readonly></td></tr>
    <tr class="here"><td><input type="text" ></td></tr>
</table>

td {
    padding: 15px;
    margin: 10px;
}

.here {
    background-color: red;
}

http://jsfiddle.net/dZYEM/

我怎样才能修改类。这种工作在哪里输入子属性readonly？我不想修改HTML。

编辑：

现在我有：jsfiddle.net/dZYEM/2 /

我想收到：http://jsfiddle.net/dZYEM/3/

但没有使用风格。我希望只用css接收这个。

Answer 1

没有纯CSS方法可以做到这一点，因为CSS没有有或包含选择器。

但这可以使用一行jQuery来完成。它真的很快。

$("tr.here:has(input[readonly='readonly'])").css('background', 'red');

这是一个可以尝试的jsFiddle - http://jsfiddle.net/T7hnR/2/

Answer 2

嘿，你有两个选择

首先如果您的 tr 最后而不是应用此css

tr:last-child{
background:none;
}

如果你的 tr号 3 ，则> 。

tr:nth-of-type(3){
background:none;
}

Answer 3

可以通过使用CSS2 selectors

来编辑内部元素

E [foo =“warning”]匹配其“foo”属性值完全等于“warning”的任何E元素。

但是这不允许您选择外部父元素。在CSS2或CSS3下，这不存在，你使用JavaScript / jQuery提供的解决方案。

Answer 4

像这里：http://jsfiddle.net/dZYEM/10/

<强> CSS：

tr:nth-child(3n) {
    background: none !important;
}

没有一个TD的TR类

4 个答案: