没有一个TD的TR类

时间:2012-06-22 09:06:10

标签: html css

<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接收这个。

4 个答案:

答案 0 :(得分:3)

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

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

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

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

答案 1 :(得分:1)

嘿,你有两个选择

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

tr:last-child{
background:none;
}

如果你的 tr号 3 ,则>

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

答案 2 :(得分:0)

可以通过使用CSS2 selectors

来编辑内部元素
  

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

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

答案 3 :(得分:0)

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

<强> CSS:

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