html - 没有一个 TD 的 TR 课程

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/

我如何修改类 .here 以使子输入具有只读属性的工作？我不想修改html。

编辑：

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

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

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

Answer 1

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

但这可以使用一行 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 选择器来编辑内部元素

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;
}