如何将伪类 nth-of-type 与复杂选择器一起使用？ [复制]
Posted
技术标签:
【中文标题】如何将伪类 nth-of-type 与复杂选择器一起使用？ [复制]【英文标题】：How can i use pseudo class nth-of-type with a complex selector? [duplicate] 【发布时间】：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中终于有一些解决方案了
【问题讨论】：
【参考方案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以上是关于如何将伪类 nth-of-type 与复杂选择器一起使用？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
伪类选择器 E:nth-child(n)E:nth-of-type(n)