Question

我试图只设置第2和第3个div（不是第一个）和一个＆＃34; promptrow＆＃34;显示：无（因此应隐藏红色项目）。但是，n-of-type并没有选择它们 - 无法弄清楚为什么因为它看起来非常简单......

.promptrow:nth-of-type(2) {
  display:none;
  }

.promptrow:nth-of-type(3) {
  display:none;
  }


<fieldset style="margin-top: 0;">

<div class="fieldsetinside">

   <div id="crumbs">Crumbs</div>

   <div class="pgraph">
      <div>Culinary Trip</div>
      <div March 2016></div>
   </div>

   <div>Trip Details</div>

   <div style="clear: both;"></div>

   <div class="shoprow-qdat promptrow" style="color:blue;">
      <div class="quantity">Qty</div>
      <div class="description">Description</div>
      <div class="amount">Amount</div>
      <div class="total">Total</div>
   </div>

   <div class="shoplist">
       <div class="shoprow-qdat">
           <div class="quantity">1</div>
           <div class="description">Deposit 1</div>
           <div class="amount">100</div>
           <div class="total">---</div>
       </div>
   </div>

   <div class="shoplist">
       <div class="shoprow-qdat">
           <div class="quantity">2</div>
           <div class="description">Deposit 2</div>
           <div class="amount">$200</div>
           <div class="total">---</div>
       </div>
   </div>



   <div style="clear: both;"></div>

   <div class="shoprow-qdat promptrow" style="color:red;">
      <div class="quantity">Qty</div>
      <div class="description">Description</div>
      <div class="amount">Amount</div>
      <div class="total">Total</div>
   </div>

   <div class="shoplist">
       <div class="shoprow-qdat">
           <div class="quantity">3</div>
           <div class="description">Deposit 3</div>
           <div class="amount">$300</div>
           <div class="total">---</div>
       </div>
   </div>


   <div style="clear: both;"></div>

   <div class="shoprow-qdat promptrow" style="color:red;">
      <div class="quantity">Qty</div>
      <div class="description">Description</div>
      <div class="amount">Amount</div>
      <div class="total">Total</div>
   </div>

   <div class="shoplist">
       <div class="shoprow-qdat">
           <div class="quantity">4</div>
           <div class="description">Description 4</div>
           <div class="amount">$400</div>
           <div class="total">---</div>
       </div>
   </div>

   </div>
</fieldset>

这里小提琴： https://jsfiddle.net/badjuju/y88txs9b/

Answer 1

：nth-of-type（n）选择器匹配每个元素`，即第n个   特殊类型的孩子，其父母。

n可以是数字，关键字或公式。

这意味着如果有其他相同的html元素（div），那么带有类提示的div必须只有一个共同的父级

检查此示例：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(odd) {
    background: red;
}

p:nth-of-type(even) {
    background: blue;
}
</style>
</head>
<body>
<div>
  <p>red</p>
  <p>blue.</p>
</div>

<p>red.</p>

<div>
  <p>red.</p>
</div>
</body>
</html>

＆＃13;

Answer 2

nth-of-type匹配标签，你应该有这样的东西：

promptrow:nth-of-type(2) {
    display:none;
}

<promptrow class="shoprow-qdat" style="color:red;">
    <div class="quantity">Qty</div>
    <div class="description">Description</div>
    <div class="amount">Amount</div>
    <div class="total">Total</div>
</promptrow>

请参阅此jsfiddle或此代码段：

promptrow:nth-of-type(2) {
  display:none;
  }
  
promptrow:nth-of-type(3) {
  display:none;
  }

<fieldset style="margin-top: 0;">

<div class="fieldsetinside">

   <div id="crumbs">Crumbs</div>
   
   <div class="pgraph">
      <div>Culinary Trip</div>
      <div March 2016></div>
   </div>

   <div>Trip Details</div>

<div style="clear: both;"></div>

<promptrow class="shoprow-qdat" style="color:blue;">
   <div class="quantity">Qty</div>
   <div class="description">Description</div>
   <div class="amount">Amount</div>
   <div class="total">Total</div>
</promptrow>

<div class="shoplist">
    <div class="shoprow-qdat">
        <div class="quantity">1</div>
        <div class="description">Deposit 1</div>
        <div class="amount">100</div>
        <div class="total">---</div>
    </div>
</div>

<div class="shoplist">
    <div class="shoprow-qdat">
        <div class="quantity">2</div>
        <div class="description">Deposit 2</div>
        <div class="amount">$200</div>
        <div class="total">---</div>
    </div>
</div>



<div style="clear: both;"></div>

<promptrow class="shoprow-qdat" style="color:red;">
   <div class="quantity">Qty</div>
   <div class="description">Description</div>
   <div class="amount">Amount</div>
   <div class="total">Total</div>
</promptrow>

<div class="shoplist">
    <div class="shoprow-qdat">
        <div class="quantity">3</div>
        <div class="description">Deposit 3</div>
        <div class="amount">$300</div>
        <div class="total">---</div>
    </div>
</div>


<div style="clear: both;"></div>

<promptrow class="shoprow-qdat" style="color:red;">
   <div class="quantity">Qty</div>
   <div class="description">Description</div>
   <div class="amount">Amount</div>
   <div class="total">Total</div>
</promptrow>

<div class="shoplist">
    <div class="shoprow-qdat">
        <div class="quantity">4</div>
        <div class="description">Description 4</div>
        <div class="amount">$400</div>
        <div class="total">---</div>
    </div>
</div>

</div>
</fieldset>

nth-of-type隐藏类的第2和第3次出现？

2 个答案: