使用css隐藏第三个div内容

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 应用到第三个 div，仅使用 CSS 通过访问它们的类名。我想要红色的内容 3。该 HTML 位于 body 标记之外并通过 JS 生成。

接下来我可以尝试什么？

Answer 1

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

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

。

剩下的答案：

检查这个 CSS 伪选择器nth-of-type，点击运行按钮来验证

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

<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>

对于给定的 n 正值或零值， :nth-of-type(an+b) CSS 伪类匹配文档树中在其前面具有相同元素名称的 an+b-1 同级元素，并且有一个父元素。请参阅 :nth-child 了解其参数语法的更全面描述。如果您想确保选择相同类型的标签，无论它位于父元素内的哪个位置，或者在它之前出现其他不同的标签，这是一个更灵活和有用的伪选择器。