第一个DIV的风格与其他风格不同

Question

我有一个DIV列表，它们共享相同的类，如下所示：

<div class="content1"><div class="contentInner">Text1</div></div>
<div class="content1"><div class="contentInner">Text2</div></div>
<div class="content1"><div class="contentInner">Text3</div></div>
...

我希望第一个带有class =“content1”的DIV具有与同一类的以下DIV不同的样式。什么是可以实现此目的的CSS选择器？ 感谢

Answer 1

CSS有一个伪选择器，用于需要从类似元素中选择第一个元素的情况，即:first-child

  

：first-child CSS伪类表示作为其父元素的第一个子元素的任何元素。

示例：

div.content1:first-child{

  /* your css */
}

Js Fiddle Demo

Answer 2

使用nth-of type选择器。

.content1:nth-of-type(1){
  /* your style */
}

只有在您想要的div之前没有兄弟元素时才使用first-child。

See fiddle here.

Answer 3

使用CSS的:not和:first-child伪选择器为第一个div提供特定的css。

示例：

.content1:not(:first-child) {
    /* Common CSS for all divs except first div */
}

.content1:first-child {
    /* CSS for first div */
}

Answer 4

你可以使用：first-child选择器。 e.g

.content1:first-child{
text-decoration:underline;
}

fiddle