0

我有一段这样的 HTML 代码：

<div id="a">
  <p>A piece of HTML</p>
<div>

根据某些条件，它将以不同的方式放置到页面中，因此我需要给它不同的样式。

它可以像这样放置

情况1

<div id="container">
  <div id="b">
    <div id="a"></div> 
  </div>     
<div>

或者

案例2

<div id="container">
  <div id="b"></div>
  <div id="a"></div>
<div>

我想知道什么是更好的方法（如果存在并考虑到最佳实践和性能）来识别这两种不同的情况并#a使用 CSS 规则以不同的方式设置 div 的样式。

我是否应该为每种情况分配两个不同的类，然后检测添加一些这样的 CSS 规则：

#a.class-for-case-1{
  /* Rules here */
}

#a.class-for-case-2{
  /* Rules here */
}

或使用 + 选择器之类的特异性选择器：

#b #a{
  /* Rules here */
}

#b + #a{
  /* Rules here */
}

甚至使用#a应该从 + 选择器覆盖的 div 的默认样式？

#a{
  /* Default rules here */
}

#b + #a{
  /* Specific rules here */
}

提前谢谢你，如果有我没有注意到的类似问题，请原谅我。

4

2 回答 2

1

由于您有两种情况：您可以执行以下操作：

#b #a{/*css code here for first case*/}
#container > #a{/*css code here for second case*/}
于 2013-09-06T10:26:09.140 回答
1

最快的选择（我认为）

我没有测试过，它只是基于我对工作的理解。假设只有这两种情况，您应该这样做：

#a {
  /* Default rules here */
}

#b #a {
  /* Override rules here */
}

唯一的默认#aid 选择器大约是最快的选择器，因为该元素在页面上应该是唯一的，并且只需要进行一次检查即可应用规则。所以设置一个默认样式。

覆盖规则几乎和浏览器一样快，因为浏览器会遇到唯一的 id#b再做一次检查 DOM 树#a，然后应用这些规则（如果它#b显然是子节点）。当然，我们在这里谈论的是效率上的细微差别。

请意识到#a通过这些选择器应用的任何样式都将具有相当高的特异性（尤其是嵌套版本），因此无法被.someClass您或 javacript 可能尝试应用的任何单纯 css 覆盖。但这可能完全没问题，具体取决于您的上下文。正是这种高度的特异性使得稍后在这些元素上更改 css 导致一些人根本不使用 id 来应用 css 属性，但我觉得这一切都取决于网站的上下文是好是坏为此使用 id。

于 2013-09-06T16:21:10.673 回答