Fatal编程技术网
  • css/
  • Css 我可以将：nth-child（）或：nth-of-type（）与任意选择器组合使用吗？

Css 我可以将：nth-child（）或：nth-of-type（）与任意选择器组合使用吗？

css

Css 我可以将：nth-child（）或：nth-of-type（）与任意选择器组合使用吗？,css,css-selectors,Css,Css Selectors,是否有方法选择与任意选择器匹配（或不匹配）的第n个子项？例如，我希望选择每一个奇数表行，但要在这些行的子集内： table.myClass tr.row:第n个子项（奇数）{ ... } 一行 一行 一行 一行 但是：nth-child（）似乎只计算所有tr元素，而不管它们是否属于“row”类，因此我最终得到的是一个偶数的“row”元素，而不是我正在寻找的两个。同样的情况也发生在：nth-of-type（）上 有人能解释一下原因吗？不太可能 ：n子类伪类与 具有+b-1同级的元素 在文档

是否有方法选择与任意选择器匹配（或不匹配）的第n个子项？例如，我希望选择每一个奇数表行，但要在这些行的子集内：

table.myClass tr.row:第n个子项（奇数）{
...
}


一行
一行
一行
一行
但是
：nth-child（）
似乎只计算所有
tr
元素，而不管它们是否属于“row”类，因此我最终得到的是一个偶数的“row”元素，而不是我正在寻找的两个。同样的情况也发生在
：nth-of-type（）
上

有人能解释一下原因吗？

不太可能

：n子类
伪类与 具有+b-1同级的元素 在文档树中的前面，用于 给定n的正值或零值， 并且有一个父元素

它是自己的选择器，不与类组合。在您的规则中，它只需同时满足两个选择器，因此如果表行碰巧也有
.row
类，它将显示
:n子行（偶数）
表行。

这是一个非常常见的问题，原因是对
:n子行（An+B）
和
:n-of-type（）
的工作方式存在误解

在选择器级别3中，对同一父级下的所有同级元素进行计数。它不仅计算与选择器其余部分匹配的同级。类似地，共享相同元素类型的兄弟姐妹计数，该元素类型引用HTML中的标记名，而不是选择器的其余部分

这也意味着，如果同一父级的所有子级都是相同的元素类型，例如，如果一个表体的唯一子级是
tr
元素，或者一个列表元素的唯一子级是
li
元素，那么
：nth-child（）
和
：nth-of-type（）
的行为将相同，也就是说，对于An+B的每个值，
：n个子项（An+B）
和
：n个类型（An+B）
将匹配同一组元素

事实上，给定复合选择器中的所有简单选择器，包括伪类，如
：nth-child（）
和
：not（）
，彼此独立工作，而不是查看与选择器其余部分匹配的元素子集

这也意味着，在每个单独的复合选择器中，简单选择器之间没有顺序的概念，这意味着，例如，以下两个选择器是等效的：

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row
翻译成英语，它们都表示：

选择符合以下所有独立条件的任何
tr
元素：

  • 它是其父代的奇数子代
  • 它具有类“row”；及
  • 它是类为“myClass”的
    表
    元素的后代
（你会注意到我在这里使用了一个无序列表，只是为了让大家明白这一点）

第4级选择器试图通过允许2接受任意选择器参数S来纠正这一限制，这同样是由于选择器在现有选择器语法指示的复合选择器中是如何独立运行的。在你的例子中，它看起来是这样的：

table.myClass tr:nth-child(odd of .row)
当然，作为一个全新规范中的全新提案，这可能要等到

同时，您必须使用脚本来过滤元素，并相应地应用样式或额外的类名。例如，以下是使用jQuery的常见解决方法（假设表中只有一个行组填充了
tr
元素）：

使用相应的CSS：

table.myClass tr.row.odd {
  ...
}
如果您正在使用自动化测试工具（如Selenium）或将HTML与工具（如BeautifulSoup）结合使用，则这些工具中的许多都允许使用XPath作为替代工具：

//表[contains（concat（“”，@class'），'myClass'）]///tr[contains（concat（“”，@class'），'row'）][position（）mod 2）=1]
使用不同技术的其他解决方案留给读者作为练习；这只是一个简单的、人为的例子

1如果指定类型或通用选择器，则必须先指定。然而，这并没有改变选择器的基本工作方式；这只不过是一个句法上的怪癖

2这最初被提议为
：nth-match（）
，但是，由于它仍然只计算与其兄弟元素相关的元素，而不是与给定选择器匹配的所有其他元素相关的元素，因此从2014年起，它被重新用作现有
：nth-child（）的扩展
取而代之。

类型的第n个根据相同类型元素的索引工作，但无论同级元素是什么类型，第n个子仅根据索引工作

例如

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
或

.rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){
    display:none;
}
现在您一定想知道第n个孩子和第n个类型的孩子有什么区别，所以这就是区别

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
假设html是

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
但是如果您使用第n种类型css可以

.rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){
    display:none;
}
由于
.rest
元素的类型是
，因此这里
类型的第n个
正在检测
.rest
的类型，然后他在
的第1、2、3、4、5个元素上应用了css


您可以使用xpath实现这一点。类似于
//tr[contains（@class，'row'）和position（）mod 2=0]
的东西可能会起作用。关于如何更精确地匹配类的详细信息，还有其他一些SO问题。以下是您的答案


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TEST</title>

  <style>

    .block {
      background: #fc0;
      margin-bottom: 10px;
      padding: 10px;
    }
    /* .large > .large-item:nth-of-type(n+5) {
      background: #f00;
    } */

    .large-item ~ .large-item ~ .large-item ~ .large-item ~ .large-item {
      background: #f00;
    }

  </style>
</head>
<body>

<h1>Should be the 6th Hello Block that start red</h1>
<div class="small large">
  <div class="block small-item">Hello block 1</div>
  <div class="block small-item large-item">Hello block 2</div>
  <div class="block small-item large-item">Hello block 3</div>
  <div class="block small-item large-item">Hello block 4</div>
  <div class="block small-item large-item">Hello block 5</div>
  <div class="block small-item large-item">Hello block 6</div>
  <div class="block small-item large-item">Hello block 7</div>
  <div class="block small-item large-item">Hello block 8</div>
</div>

</body>
</html>




试验
.街区{
背景#fc0；
边缘底部：10px；
填充：10px；
}
/*.large>.large项目：第n个类型（n+5）{
背景：#f00；
} */
.大件~.大件~.大件~.大件~.大件~.大件{
背影

.rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){
    display:none;
}



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TEST</title>

  <style>

    .block {
      background: #fc0;
      margin-bottom: 10px;
      padding: 10px;
    }
    /* .large > .large-item:nth-of-type(n+5) {
      background: #f00;
    } */

    .large-item ~ .large-item ~ .large-item ~ .large-item ~ .large-item {
      background: #f00;
    }

  </style>
</head>
<body>

<h1>Should be the 6th Hello Block that start red</h1>
<div class="small large">
  <div class="block small-item">Hello block 1</div>
  <div class="block small-item large-item">Hello block 2</div>
  <div class="block small-item large-item">Hello block 3</div>
  <div class="block small-item large-item">Hello block 4</div>
  <div class="block small-item large-item">Hello block 5</div>
  <div class="block small-item large-item">Hello block 6</div>
  <div class="block small-item large-item">Hello block 7</div>
  <div class="block small-item large-item">Hello block 8</div>
</div>

</body>
</html>



.cpw {
    display:none;
}

.video_prewrap {
    margin-right:20px;
}

.video_prewrap:nth-child(2n) {
    margin-right:0;
}

.cpw ~ .video_prewrap:nth-child(2n) {
    margin-right:20px;
}

.cpw ~ .video_prewrap:nth-child(2n-1) {
    margin-right:0;
}



<div class="card table">
    <div class="box">
        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>

        <div class="box-value">
            <select class="priorityOption">
                <option value="">--</option>
                <option value="">LOREM</option>
                <option value="">LOREM</option>
            </select>
        </div>
    </div>
</div>