0 
<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 がある場所でこれが機能するクラス .here を変更するにはどうすればよいですか? 私はhtmlを変更したくありません。

編集：

今私は持っています：jsfiddle.net/dZYEM/2/

受け取りたい: http://jsfiddle.net/dZYEM/3/

しかし、スタイルを使用せずに。これをcssだけで受け取りたい。

4

4 に答える 4

3

CSS にはhasまたはcontainsセレクターがないため、これを行う純粋な CSS の方法はありません。

しかし、これは 1 行の jQuery を使用して実行できます。そして、それは本当に速いです。

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

これを試すための動作中のjsFiddleがあります- http://jsfiddle.net/T7hnR/2/

于 2012-06-22T09:25:56.377 に答える
1

ねえ、あなたには2つのオプションがあります

最初は、この css を適用するよりもtrが最後である場合です

tr:last-child{
background:none;
}

2 つ目は、tr 番号が以前よりも3である場合です。

tr:nth-of-type(3){
background:none;
}
于 2012-06-22T09:46:43.820 に答える
0

CSS2セレクターを使用して内部要素を編集できます

E[foo="warning"] "foo" 属性値が "warning" と完全に等しい任意の E 要素に一致します。

ただし、これでは外側の親要素を選択できません。CSS2 または CSS3 では、これは存在しないため、JavaScript/jQuery で提供されるソリューションを使用して行う必要があります。

于 2012-06-22T09:17:42.337 に答える
0

ここのように: http://jsfiddle.net/dZYEM/10/

CSS:

tr:nth-child(3n) {
    background: none !important;
}
于 2012-06-22T09:17:48.783 に答える