Question

假设您有以下项目列表：

<div>
  <div data-wo="537">Element 1</div>
  <div data-wo="937">Element 2</div>
  <div data-wo="937">Element 3</div>
  <div data-wo="821">Element 4</div>
  <div data-wo="821">Element 5</div>
  <div data-wo="821">Element 6</div>
</div>

要选择属性为data-wo =“937”的所有直接兄弟姐妹，您可以这样做：

div[data-wo="937"] + div[data-wo="937"]

我想知道的是，是否有一种方法可以推广这个选择器，使其适用于任何与其兄弟相同的数据？

在上面的例子中，我想要一个只选择的选择器：Element 3，Element 5和Element 6.

Answer 1

这是不可能的，因为它需要一种方法让每个元素和选择器能够将它自己的值用作变量。

属性selectors are quite powerful，但并不像你希望的那样多。

Answer 2

不，您无法捕获属性并在CSS中重复使用它。

div[data-wo="937"] + div[data-wo="937"]是选择具有data-wo属性值 937 的div的唯一方法，该值直接在具有相同属性值的前一个div之后。为了使这更通用，你需要（1.）给第一个占位符变量和（2.）在选择兄弟时引用变量。这不可能是 attribute values must be CSS identifiers or strings 。

我之前回答了类似的问题，它是关于using unknown values as selectors的，并且OP想要选择与父项具有相同属性值的子项，但属性值在此问题中未知。第一个选择是按照我在链接问题的答案中建议的内容：将所有可能的值（组合）值添加到CSS中。
您已经意识到这个选项并且它并不令人满意，即使您使用像LESS或SASS这样的预处理器，它只会产生几行代码，因为您的属性值是数字，因此可以自动递增。

我看到的另一个选项是在HTML中添加类，或者在可能自动生成HTML的代码中添加，或者之后使用JS：

var prevData = "";
$("#parent div").each(function() {
  var currentData = $(this).attr("data-wo");
  if (currentData == prevData) {
    $(this).addClass("special-sibling");
  }
  prevData = currentData;
});

.special-sibling {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent">
  <div data-wo="537">Element 1</div>
  <div data-wo="937">Element 2</div>
  <div data-wo="937">Element 3</div>
  <div data-wo="821">Element 4</div>
  <div data-wo="821">Element 5</div>
  <div data-wo="821">Element 6</div>
</div>

Answer 3

我认为我不会100％理解你的问题。但我会对此感到震惊。

我猜你想要除了第一个兄弟姐妹以外的所有兄弟姐妹？所有直接兄弟姐妹都可以被〜选择器

作为目标

// The ~ selector is used to target all siblings of an element based on selector.
div[data-wo="821"] ~ div[data-wo="821"]

这将针对除了第一个兄弟之外的所有兄弟，因为它不是兄弟姐妹，而是直接目标本身。如下图所示： https://jsfiddle.net/rtdLkpqg/

在css中，是否可以捕获属性值以在同一个选择器中重用？

3 个答案: