Fatal编程技术网
  • javascript/
  • Javascript 在CSS中，是否可以以索引号标识的类属性为目标？

Javascript 在CSS中，是否可以以索引号标识的类属性为目标？

javascript html css dom

Javascript 在CSS中，是否可以以索引号标识的类属性为目标？,javascript,html,css,dom,css-selectors,Javascript,Html,Css,Dom,Css Selectors,我正试图通过索引或迭代，严格使用CSS，以类元素（在DOM中多次出现）为目标 我知道实现这一点的几种不同方法：我可以将元素放入数组中，并检索所述元素的特定索引（Javascript）。我可以用一个#ID标记我试图指向的元素。我可以通过指定属性（.element[href=“link”]）来优化目标元素。伪类：first child和：last child仅针对该（父）元素（Duh！）的子元素 示例：我有一个.class在我的DOM中出现了5次，我想影响该.class元素的3rd迭代的CSS属性

我正试图通过索引或迭代，严格使用CSS，以类元素（在DOM中多次出现）为目标

我知道实现这一点的几种不同方法：我可以将元素放入数组中，并检索所述元素的特定索引（Javascript）。我可以用一个#ID标记我试图指向的元素。我可以通过指定属性（
.element[href=“link”]
）来优化目标元素。伪类
：first child
和
：last child
仅针对该（父）元素（Duh！）的子元素

示例：我有一个
.class
在我的DOM中出现了5次，我想影响该
.class
元素的3rd迭代的CSS属性

我希望有一个伪类
.element:index-3。
可能有某种东西让您可以这样做。

如果我理解正确，您希望在本例中使用内容“Me！”来设置元素的样式：

<body>
  <p>Not me.</p>
  <p class="me">Not me.</p>
  <div><p class="me">Not me.</p></div>
  <p class="me">Me!</p>
  <div><div><p class="me">Not me.</p></div></div>
  <p class="me">Not me.</p>
</body>
正如ScottS在评论中所指出的，只有当所有类都在相同的元素类型上（例如，
p
）时，这才是可能的。

如果元素不是作为相邻的兄弟元素放置的，或者至少不是放在同一个“范围”（容器元素）中，您就无法发现存在、迭代，或者实际上与“相关”元素无关

你最好的办法是使用一个非常丑陋的解决方案， 基于这个假设，元素是兄弟元素，看起来可能是这样的：li.class:first child+li+li{color:black；}要找到第三次迭代

或者只是使用一些JS来计算Instance的发生率并将其作为一个特殊类插入，比如“在这里给我css”。

我的DOM中出现了一个
.class
5次，我想影响
.class
元素第三次迭代的css属性

我将此理解为“在整个DOM中使用
.class
的目标第三个元素”，例如：

#1.

    #2

  • 

  • …
    • #3，瞄准这一个！

  • 


...                #4.

#5.
任何
：n-
伪类表示法表示一个元素，该元素由符合特定条件的同级数限定（
：n子元素（an+b）
等）

CSS规范（包括）不提供在同级上下文之外通过索引限定元素的方法（即，只能遍历单个节点，不能遍历整个DOM树）。这背后有一个性能原因（遍历DOM很困难，想象一下异步内容更新，渲染引擎不是这样工作的）；但是也有类似于
：nth element ever（3）
的东西将是一个非常任意的标准，并且通过引入另一个类（这意味着它所做的事情）更好地定位，最好是在代码生成过程中。

我找到了一个非常好的列表，列出了可以定位元素的所有变体。其中90%我已经知道了，但确实有些令人大开眼界的地方。你应该将此作为答案发布
div.class:nth类型（3）
应该可以完美地完成这个任务。我在我链接的网站上看到了这个列表，所以我尝试了一下。显然，它只影响目标元素的文本。此解决方案失败：
nth of type
实际上不查看和计算类，而是查看元素的类型。因此，在您的示例中，类型（3）的
.me:nth只针对正确的
p
，因为它是
div
下的第三个
p
元素，并且它有一个
.me
类。显示在没有
.me
类的情况下引入另一个
p
会导致选择器失败。@ScottS:啊，我不知道。谢谢你的信息。我在回答中更新了。对不起，伙计们。你提到的对我来说都不是新鲜事，也不是我想要的解决方案。我会尝试改写这个问题：考虑这个……（我会参考一个数组，但只是比喻，而不是句法上），假设我有一个5个对象的数组。我想选择数组中的第三个对象，而不考虑与该对象相关的任何兄弟对象。我只想针对对象的第三个实例。不按类型、不按属性、不按子对象等等@JustinWard——“数组”表示按顺序排列的类似类型的连续对象。你的DOM真的是这样的吗？这些元素是否像
li
元素一样在DOM中彼此相邻？或者你寻找第三个实例，不管它是否与同一对象的其他实例连续？我说的正是我的意思。五个独立的元素，每个元素都属于同一类。我想通过索引号来定位其中一个div。不是第一个或最后一个。不是指它的孩子，是的。我认为这是不可能的。我只是好奇…这些论坛上似乎有一些受过良好教育的人，所以我想我应该试一试。我可以将一个ID附加到元素中，并以这种方式更精确地定位它。我只是想找到另一种方法。

.me:nth-of-type(3) {color:red;}



<h1 class="class">...</h1>                    #1
<div>
  <ul class="class">                          #2
    <li>...</li>
    <li class="class">...</li>                #3, target this one!
    <li>...</li>
  </ul>
  <div class="class">...</div>                #4
</div>
<p class="class">...</div>                    #5