使用css

Question

假设我有这样的HTML。

<div class="imgareaselect-handle"> Content 1 </div>
<div class="imgareaselect-handle"> Content 2 </div>
<div class="imgareaselect-handle"> Content 3 </div>
<div class="imgareaselect-handle"> Content 4 </div>
<div class="imgareaselect-handle"> Content 5 </div>

我想要做的是只使用CSS通过访问他们的类名将CSS应用于第三个div。我希望内容3为红色。 这个HTML在body标签的一边，并通过JS生成。

有人在这里帮助我。

Answer 1

<强>更新： 根据要求，对于这种特殊情况，也可以使用jQuery，因此以下代码将起作用

$('.imgareaselect-handle').hide().eq(2).show()

剩余答案 ：

检查此CSS伪选择器nth-of-type，单击运行按钮以验证

＆＃13;

＆＃13;

.imgareaselect-handle:nth-of-type(3) {
  background-color: red;
}

＆＃13;

<div class="imgareaselect-handle"> Content 1 </div>
<div class="imgareaselect-handle"> Content 2 </div>
<div class="imgareaselect-handle"> Content 3 </div>
<div class="imgareaselect-handle"> Content 4 </div>
<div class="imgareaselect-handle"> Content 5 </div>

＆＃13;

＆＃13;

＆＃13;

  

：nth-​​of-type（an + b）CSS伪类匹配一个元素，该元素在文档树中具有与其前面具有相同元素名称的+ b-1兄弟，对于给定的正值或零值n，并且有一个父元素。请参阅：nth-​​child以更全面地描述其参数的语法。如果您希望确保选择相同类型的标记，无论它在父元素中的位置，还是其他不同的标记出现在它之前，这都是一个更灵活，更有用的伪选择器。