1

我有一个通用的 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代码

如何margin-left在同一个通用 CSS 文件中拥有两个不同的rich-tabpanel属性？

4

2 回答 2

1

从那一刻起*:first-child +html .rich-tabpanel就是一个黑客，它的特异性是未知的。.ie7 .rich-tabpanel具有特定性 0020，因此该 hack 可能在其之上具有特定性。更改更改特定性的选择器.ie7 .rich-tabpanel，html .ie7 .rich-tabpanel然后应用规则。我不保证这是一个特殊性问题，但无论如何更改选择器都是可行的。

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

无论如何，我建议您使用条件注释而不是 Internet Explorer 的 hacks。

于 2013-01-02T12:01:43.033 回答
0

首先，我很困惑为什么要应用这种 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
}

.ie7除非您在 html 中专门添加类，否则不起作用。您是否使用服务器端脚本将该类添加到 html 标记中？目的更好的方法是：

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

如果它是一个 IE 浏览器，这个 CSS 文件将被获取并用于覆盖 css 属性。这使您可以更好地控制样式。

于 2013-01-02T11:42:36.500 回答