不css樣式應用到子元素

我們不css樣式應用到子元素

<div class="xTable"> 
<table> 
    <tr> 
    <td> 
    <div class="xTable"> 
    <table> 
     <tr> 
     <td> 
     <div class="xTable"> 
     <table>...</table> 
     </div> 
     </td> 
     </tr> 
    </table>  
    </div> 
    </td> 
    </tr> 
</table> 
</div>

我如何申請自定義CSS樣式第二格，只有2次DIV，而不是1或3或更深？

無法添加額外課程或IDS！ Html是動態生成的，無法管理。

我會用

.xTable table .xTable

但是這意味着第三和更深的div將受到影響。

沒有ID！請僅使用CSS選擇器。

謝謝！

來源

2013-03-20 Max Grass

爲了充分滿足這兩種標記的默認瀏覽器和其正確添加它是不是已經指定你需要使用一個tbody：

body > .xTable > table > tr > td > .xTable, 
body > .xTable > table > tbody > tr > td > .xTable { 
    ... 
}

JSFiddle example。

這假設您的第一個<div class="xTable">除<body>之外沒有父母。如果情況並非如此，請將您的父母更換爲body。

來源

2013-03-20 14:20:17

所以在複雜層次結構的情況下，我需要指定每個孩子？我會嘗試的。謝謝 – 2013-03-20 14:22:26

''''選擇器選擇[child]（http://www.w3.org/TR/selectors/#child-combinators）元素，沒有更深層次的東西。 'body> .xTable> .xTable'不會工作，因爲'.xTable'不是'.xTable'的直接子元素。同樣，'body> .xTable> table .xTable'會將樣式應用於第一個'.xTable'子表'中包含的所有'.xTable'元素（因此樣式化第二個和第三個'.xTable'元素）。爲了選擇更深的元素，你必須像這樣工作。 'z的父母'，而不是'父母或祖父母的父母'或'祖父母'。 – 2013-03-20 14:28:00

thx，這個想法應用了，問題解決了。 – 2013-03-20 14:33:49

我可能會給第二個div額外的CSS類。

<div class="xTable second-xTable-div"></div>

來源

2013-03-20 14:10:54 Rob

同意。這是從語義標記角度來看最正確的解決方案。 – Adrian 2013-03-20 14:12:35

html是動態生成的，事實並非如此。我需要純粹的CSS。 – 2013-03-20 14:14:05

@ gr9zev你不能用它生成css類嗎？或者它是通用的，它是完全不可管理的？ – Rob 2013-03-20 14:15:15

當您使用someelement someotherelement它並不重要多少深，你的第一個元素去。但是，您可以在它們之間添加一個>，以便只選擇someotherelement，它完全是someelement的孩子，如下所示：someelement > someotherelement並且它不會選擇第一個選擇器的孩子的孩子。

來源

2013-03-20 14:16:07 Sheric

建議課程組合。例如<div class="table level-2" />

來源

2013-03-20 14:17:19 Shuping

使用:not選擇排除父再有孩子的組合子一長串可能做的工作：

:not(table) > .xTable > table > tr > td > .xTable

您可能需要在隱含TBODY元素，雖然混合。

一個更好的解決辦法可能是：

.xTable .xTable { 
    foo: bar; 
} 

.xTable .xTable .xTable { 
    foo: Whatever it would have been if the previous selector didn't match 
}

來源

2013-03-20 14:18:26 Quentin

那麼可能這不只是：

body > .xTable table tr td.xTable {STYLES}

????

來源

2013-03-20 14:19:08 Michael

沒有'.xTable'是另一個*孩子*。他們的後代比這更深層次。 – Quentin 2013-03-20 14:19:57

所有的.xTable都已經有了它們的樣式。只有第二個需要被覆蓋，更深層次的元素不能被影響。 – 2013-03-20 14:20:39

查看上面的修改。 – Michael 2013-03-20 14:24:02

正如你所說，你不能添加@Rob提供的類名，那麼我認爲只有一種方法去與JavaScript或jQuery。下面我使用jQuery提供瞭解決方案。

$('.xTable:eq(1)').css('backgroundColor','green'); //Selects the second .xTable class div

檢查更多關於它here

來源

2013-03-20 14:19:44

不css樣式應用到子元素

回答

相關問題