如何在所有站点上仅使用 css 获取具有相同数据属性的元素？

Posted 2023-03-06

【中文标题】如何在所有站点上仅使用 css 获取具有相同数据属性的元素？

【英文标题】：How to get element with same data-attr on all site with only css?

【发布时间】：2021-09-14 04:07:06

【问题描述】：

有一个任务 - 在一个有大量嵌套的站点上随机找到一个具有日期属性的元素。这个任务我应该只用 CSS 来做，不用 JS（可能是从 SASS 或 LESS 编译的）。有人知道如何使用 [data-some="true"] 找到任何块？你能帮助我吗？请问？

<div id="parent">
    <div class="row-1">
       <div class="child-first></div>
       <div class="child-second>
           <div data-some="true"></div>
           <div data-some="true"></div>
           <div data-some="true"></div>
       </div>
    <div>
    <div class="row-2">
       <div class="child-first></div>
       <div class="child-second>
           <div data-some="true"></div>
           <div data-some="true"></div>
           <div data-some="true"></div>
       </div>
    <div>
    ...
    <div class="row-n">
       <div class="child-first></div>
       <div class="child-second>
           <div data-some="true"></div>
           <div data-some="true"></div>
           <div data-some="true"></div>
       </div>
    <div>
</div>

【参考方案1】：

你很接近，可以直接使用[data-some="true"]作为CSS选择器：

[data-some="true"] 
  color: red;

<div id="parent">
  <div class="not_nested">
    <div data-some="false">test</div>
    <div data-some="true">test</div>
    <div data-some="true">test</div>
  </div>
  <div>
    <div class="row-2">
      <div class="nested">
        <div data-some="true">test</div>
        <div data-some="false">test</div>
        <div data-some="true">test</div>
      </div>
    </div>
    <div class="row-n">
      <div class="child-first"></div>
      <div class="child-second">
        <div class="deeper_nested">
          <div data-some="true">test</div>
          <div data-some="true">test</div>
          <div data-some="false">test</div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

非常感谢。但我只需要用 [data-some="true"] 取一个元素。在不知道嵌套深度、带有 [data-some="true"] 的元素的数量以及这些元素的父级的类名的情况下

您可以添加:first-child 或:nth-child()，但如果没有javascript，您将无法随机获得一个。即使使用 SASS 或 LESS 也不可能......

我希望在 css 中有新的机会。不过还是非常感谢你

:nth-child() 怎么样 - 这将阻止我访问 中的元素。如果我为您的示例调用 [data-some="true"]:nth-child(3) - 它会给我'null'。

您也可以使用last-child() 或nth-of-type() 或者您可以组合多个这些选择器以获得嵌套元素。但是对于所有你必须知道的 html 结构，就像你最后的评论显示的那样。你可以忘记 CSS 中的随机选择。即使在 SASS 或 LESS 中，随机函数也仅在为浏览器编译 CSS 时起作用。编译后的 CSS 又是静态的了……