如何将伪 class nth-of-type 与复杂选择器一起使用？

Question

大家好，我有几个带有 class 'someclass' 和名称 'somename' 的元素，以及一个复杂的选择器，例如：

.someclass[name="somename"]

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

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

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

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

一切正常。我尝试了不同类型的支架，但仍然有这个问题。什么是解决方案？

更新：我正在寻找一种对元素使用 nth-of-type 的方法，而不是一个接一个。

我的代码是这样的：

<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>

这就是我的代码不起作用的原因！最后有一些解决方案在评论

Answer 1

我打开 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

Answer 2

就像你描述的那样对我有用。

  * {
    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>

如何将伪 class nth-of-type 与复杂选择器一起使用？

How can i use pseudo class nth-of-type with a complex selector?

css

pseudo-element