在同一个具有不同属性的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属性。这使您对样式有更多的控制。