Question

我有两个名称完全相同的类，除了在类末尾的“ == $ 0”外，没有什么可区分它们的。

这是html

<html>
      <body>
             <div tabindex="0" class="Test" role="button"> == $0

             <div tabindex="0" class="Test" role="button">
      </body>
</html>

我要在CSS中选择“ == $ 0”。

Answer 1

无法在CSS中表达== $0。这表示“当前在Chrome开发者工具的DOM检查器中被选中”。

Answer 2

无法使用CSS根据其内容选择元素。根本没有选择器。

如果您不查看内容，则仍然可以通过检查两个元素在其父元素中的位置或与其他元素的相关位置来区分这两个元素。

父母的孩子

例如，您可以使用:first-child或更通用的:nth-child(x)来获取特定的子项，因此.Test:first-child将仅选择.Test div作为其第一个子项。父母它不会选择另一个。

.Test:first-child {
  border: 1px solid blue;
}

.Test:nth-child(2) {
  border: 5px solid red;
}

<div tabindex="0" class="Test" role="button"> == $0</div>
<div tabindex="0" class="Test" role="button"></div>

看着他们的兄弟姐妹

或者，您可以使用~组合器查找同级：

.Test {
  border: 1px solid blue;
}

/* A .Test that is following another .Test */
.Test ~ .Test {
  border: 5px solid red;
}

<div tabindex="0" class="Test" role="button"> == $0</div>
<div tabindex="0" class="Test" role="button"></div>

如何在CSS中指定== $ 0？

2 个答案: