如何将伪类 nth-of-type 与复杂选择器一起使用？ [复制]答案

【问题标题】：How can i use pseudo class nth-of-type with a complex selector? [duplicate]如何将伪类 nth-of-type 与复杂选择器一起使用？ [复制]
【发布时间】：2022-01-11 09:30:21
【问题描述】：

大家好，我有几个具有类“someclass”和名称“somename”的元素，以及一个复杂的选择器，例如：

.someclass[name="somename"]

我只想将样式添加到第二个元素。所以我试试

.someclass[name="somename"]:nth-of-type(2) {}

但它不起作用，因为它必须起作用。而如果选择器并不复杂，例如，只需：

.someclass:nth-of-type(2) {}

正常工作。我尝试了不同类型的括号，但仍然有这个问题。什么是解决方案？

更新：我一直在寻找一种将第 n 个类型用于元素的方法，而不是一个接一个。

我的代码是这样的：

<div class="someclass" name="somename">1</div>
<div class="someclass2" name="somename">2</div>
<div class="someclass" name="somename">3</div>
<div class="someclass" name="somename">4</div>
<div class="someclass" name="somename">5</div>

这就是我的代码不起作用的原因！ cmets中终于有一些解决方案了

【问题讨论】：

标签： css pseudo-element

【解决方案1】：

正如你所描述的那样为我工作。

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .someclass {
      height: 200px;
      width: 100px;
      border: 1px solid lightseagreen;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
  }

  .someclass[name="somename"]:nth-of-type(2) {
      background: cornflowerblue;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<div class="someclass" name="somename">1.</div>
<div class="someclass" name="somename">2.</div>
<div class="someclass" name="somename">3.</div>
<div class="someclass" name="somename">4.</div>
<div class="someclass" name="somename">5.</div>
</body>
</html>

更新解决方案

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100%;
  }

  .container div {
    height: 200px;
    width: 100px;
    border: 1px solid lightseagreen;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
  }

  .container div:nth-child(2) {
      background: cornflowerblue;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="someclass" name="somename">1.</div>
      <div class="someclass2" name="somename">2.</div>
      <div class="someclass" name="somename">3.</div>
      <div class="someclass" name="somename">4.</div>
      <div class="someclass" name="somename">5.</div>
    </div>
  </body>
</html>

【讨论】：

所以最后我猜想我的元素和这个选择器不是一一对应的，而且它们之间还有其他类的元素。例如，如果我们将示例中的字符串
2.
更改为
2.
，这种背景着色不再起作用。任何想法如何解决这个问题？
这是一个 jsfiddle jsfiddle.net/7L04zvfb
所以最后这是我的 jquery 解决方案： $('.someclass[name="somename"]').eq(1).css('display','none');
在 CSS 中有一个解决方案。请参阅 jsfiddle 链接。另一个解决方案也在 javascript 中，但我试图只关注 CSS。 jsfiddle.net/6845qs3k
也可以用jQiery来完成。我将它放在<div class="container> 中，并为其所有子代<div> 设置属性.container div {...}，然后取出容器的第二个子代并为其赋予唯一设置.container div:nth-child(2) {...}

【解决方案2】：

我打开 CodePen 并写了这个

在 HTML 部分：

<div name='blue' class='yellow'>red</div>
<div name='blue' class='yellow'>red</div>
<div name='blue' class='yellow'>red</div>
<div name='blue' class='yellow'>red</div>

在 CSS 部分：

.yellow[name='blue']:nth-of-type(2) {
  color: red;
}

而且，正如您在照片中看到的，似乎工作正常。

如果您需要更多资源，请查看Attribute Selectors 部分下的here

【讨论】：

感谢您的回复，我已经更新了我的问题。我不知道如果具有相同类和名称的元素不直接一个接一个，我就不能使用 nth-of-type