Question

我有几个div，其中一些有一个类'test'，就像选择器first-child只能突出第一个有'test'类的DIV，但是，只有在类'test'这个时才有效第一个div。据我了解，选择器采用第一个对象类型而不是类。有没有人有任何想法？在下面的这个例子中，我希望选择器突出显示带有“Test 2”的div（它是第一个具有测试类的DIV）

.teste:first-child{
	background-color:#F00;
	border:solid 4px #33CCCC;	
}

<div>
  Teste 1
</div>
<div class="teste">
  Teste 2
</div>
<div class="teste">
  Teste 3
</div>
<div class="teste">
  Teste 4
</div>

Answer 1

Tienes que usar：div:first-of-type

div:first-of-type { background-color:#F00;
    border:solid 4px #33CCCC;    }

FIDDLE

y si quieres el siguiente es：

.teste:nth-child(2) { background-color: green }

我想象自己的想法。

所以在英语中我假设他正在寻找第一个＆＃34; teste＆＃34;类具有样式，这意味着他需要.teste:nth-child(2)。希望它有所帮助：）

Answer 2

在第一行之后添加:not(.teste) + .teste，如下所示：

/* If element is first to it's parent and has class "red", it shall get border. */
.teste:first-child,
/* If ".red" element is not first to its parent, but is immediately following an element without class ".red", it shall also deserve the honor of said border. */
:not(.teste) + .teste {
    background-color: #f00;
    border: 4px solid #3cc;
}

或者你可以考虑使用js。

如何为某个类使用第一个子选择器

2 个答案: