讓我們得到開門見山,我創造了這個例子跨越,以更好地讓我的觀點:影響父只
HTML: 表1
<table class="testClass">
<tr>
<td>Inner table
<table>
<tr>
<td>Hello</td>
<td>Testing testing</td>
<td>Bye</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<br />Table 2
<table class="testClass">
<tr>
<td colspan="3">stuff</td>
</tr>
<tr>
<td>Left</td>
<td>Middle</td>
<td>Right</td>
</tr>
</table>
CSS:
table {
border: 2px solid red;
width: 100%;
}
td {
border: 2px solid blue;
}
/* Relative CSS */
.testClass tr:last-child td:nth-child(1) {
width: 15px;
}
.testClass tr:last-child td:nth-child(2) {
width: auto;
}
.testClass tr:last-child td:nth-child(3) {
width: 15px;
}
所以我們有2個表,兩個表都是相同的類。 Table 1
有一個表格,其中Table 2
沒有。
我發現這個問題是使用我創建的CSS,我無法停止受影響的子表(內表).testClass
的樣式。我認爲:not()
可以使用,但我無法找到解決方案,我覺得這應該不是那麼難。
是否有可能隻影響從父進入子表的樣式中的父親?
注意:只能更改CSS而不是HTML。 CSS3可以使用!
我希望這是有道理的,如果我需要使它更清晰,請發表評論。
爲什麼不使用類似'.testClass> tr ...'的東西來設計只有可怕ct孩子?像[this](http://jsfiddle.net/urryfof5/2/)。 – Harry 2014-08-29 09:51:00
@Harry這應該是'.testClass> tr,。testClass> tbody> tr',因爲大多數現代瀏覽器都會自動插入表格主體。 – feeela 2014-08-29 09:53:17
@feeela:是的,好點。 – Harry 2014-08-29 09:55:50