Question

我不确定这是否可能，但我想我会问。我不想给父母下的所有元素提供id，而是想知道如果在CSS中，我可以引用它们而不给它们一个id。

如果我有：

  <td id="bracket-wrapper-lt">
    <div id="bracket-top-lt"></div>
    <div id="bracket-middle-lt"></div>
    <div id="bracket-bottom-lt"></div>
  </td>

我可以访问bracket-wrapper-lt下的三个div给我以下

  <td id="bracket-wrapper-lt">
    <div></div>
    <div></div>
    <div></div>
  </td>

Answer 1

您可以使用:nth-child(<number>) css。

有关详细信息，请参阅http://css-tricks.com/how-nth-child-works/。

代码示例：

  <td id="bracket-wrapper-lt">
    <div></div>
    <div></div>
    <div></div>
  </td>

CSS：

td#bracket-wrapper-lt div:nth-child(1) {
    color: red;
}

上面会为你的第一个红色中的文字着色。

Answer 2

是的，您可以使用以下方式访问它：

#bracket-wrapper-lt div

匹配所有后代（具有指定的标记，类等）和

#brakect-wrapper-lt > div

匹配所有子项（具有指定的标记，类等）

您可以阅读更多相关信息here

Answer 3

对于跨浏览器支持，您还可以使用：

#bracket-wrapper-lt > div:first-child { /*Style goes here*/ }
#bracket-wrapper-lt > div:first-child + div { /*Style goes here*/ }
#bracket-wrapper-lt > div:first-child + div + div { /*Style goes here*/ }

演示：http://jsfiddle.net/sfEDk/

它适用于IE（＆gt; = 7），Firefox，Chrome，Safari和Opera

如何在CSS中引用children元素

3 个答案: