在同一個具有不同屬性的CSS文件中應用*：first-child + html

Question

我有一個常見的CSS文件，有兩個頁面引用它。

一個網頁，其中所指的這個共同的CSS需要以下CSS，

*:first-child + html .rich-tabpanel { 
    margin-left:-13px;  // Note : Its 13px here 
} 

其所指的這個共同的CSS的其他頁面需要以下CSS，

*:first-child + html .rich-tabpanel { 
    margin-left: 0px;   //Note : Its 0px here 
} 

HTML代碼如下，

<table class="rich-tabpanel"> 

我有這個問題只在IE7中它不採取下面的代碼（我不知道爲什麼），

.ie7 .rich-tabpanel { 
    margin-left: 13px; //OR 0px depending on the page 
} 

所以，我上面的代碼刪除，只*:first-child + html .rich-tabpanel代碼去

我怎麼能在同一個共同的CSS文件兩個不同margin-left屬性爲rich-tabpanel屬性？

Answer 1

從*:first-child +html .rich-tabpanel是黑客，它的specificity是未知的。 .ie7 .rich-tabpanel具有特定的0020，所以黑客可能有一個特定的上面。將選擇器.ie7 .rich-tabpanel更改爲html .ie7 .rich-tabpanel，這會更改特定性，然後應用規則。我不保證這是一個特定問題，但在任何情況下都可以改變選擇器。

演示：http://jsfiddle.net/xWX2R/1/

在任何情況下，我建議你使用conditional comments比黑客的Internet Explorer。

Answer 2

首先，我很困惑，爲什麼你申請這個CSS樣式：

*:first-child +html .rich-tabpanel{ 
    margin-left:-13px;  // Note : Its 13px here 
} 

具體來說，什麼是*:first-child +html .rich .rich-tabpanel1，即使是什麼意思？

當我讀到它說'選擇所有元素時，選擇第一個孩子，然後選擇相鄰標記並選擇.rich-tabpanel1。當然有更好的方法來做到這一點：

.rich-tabpanel1 { 
    //code 
} 

你的代碼沒有問題。一個頁面可以引用第一個代碼塊，而第二個可以引用另一個代碼塊。不過這個代碼：

.ie7 .rich-tabpanel { 
    margin-left: 13px; //OR 0px depending on the page 
} 

除非你在你的html中專門添加.ie7類，否則不起作用。您是否使用服務器端腳本將該類添加到html標記中？目的一個更好的方式來做到這一點是：

<!--[if IE]> 
    <style type="text/css">@import url("ie.css");</style> 
<![endif]--> 

如果它的IE瀏覽器，這個CSS文件將被提取並用於覆蓋CSS屬性。這使您對樣式有更多的控制。