如何使用css通过decendant索引选择节点?[重复]

m4pnthwp  于 2023-04-23  发布在  其他
关注(0)|答案(1)|浏览(139)

此问题已在此处有答案

Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?(9个回答)
2天前关闭。
鉴于此html

<div>
  <span>foo <span foo="bar">bar</span></span>
  <span>a</span>
  <span>a</span>
  <span foo="bar">select me only</span>
  <span>c</span>
</div>

目前,我选择这个“只选择我”span与此javascript:document.querySelectorAll('span[foo=bar]')[1]
我如何使用css选择器重新创建这个?
div span:nth-of-type(4)[foo=bar]这样的东西不起作用,因为添加另一个<span></span>会破坏它。我相信这相当于jquery中的.eq(1)运算符。

neskvpey

neskvpey1#

  • 编辑 *
div span[foo~=bar]:not(:last-of-type){
  background-color: aquamarine;
  color:red;
}
<div>
  <span>foo <span foo="bar">bar</span></span>
  <span>a</span>
  <span>a</span>
  <span foo="bar">select me only</span>
  <span>c</span>
</div>
  • 额外 *

由于文档中的 span 标签没有最终值,只是随机添加具有相同属性foo="bar"的span标签,因此无法判断如何在span上获得此 select me only。而作者试图弄清楚如何仅使用css来实现此 select me only。因此,由于这个问题需要更深入的研究和实验,目前,我只建议给他的 span 一个 * 键 *,这样系统就知道如何在这个嵌套的span中获取或选择什么。
我想出了这个想法,因为即使是一个人也不能判断选择没有它的独特性,就像说 * 那个钱包是我的,因为它是黑色的 *,但我们都知道,许多人都有相同的钱包和相同的风格,除非你有一个身份证/照片上的钱包,证明它是你的。
最后,在这里我可以建议在指定的跨度上添加关键字,你需要得到。

div :where(span[key~=unique]){
  background-color: aquamarine;
  color:red;
}
<div>
  <span>foo <span foo="bar">bar</span></span>
  <span>a</span><span foo="bar">b</span></span>
  <span>c</span><span foo="bar">d</span></span>
  <span foo="bar">bar</span></span>
  <span foo="bar">bar</span></span>
  <span foo="bar" key="unique">select me only</span>
  <span foo="bar">
    <span foo="bar">wrw</span>
      <span foo="bar">gd</span></span>
    </span>
    <span foo="bar">rr</span></span>
  </span>
  <span foo="bar">ddww</span>
  <span foo="bar">xqwr</span></span>
  <span foo="bar">sdw</span></span>
  <span>c</span>
</div>

相关问题