如何为第n个孩子显示无

时间：2018-03-21 08:08:42

标签： html css

我想隐藏td的第n个孩子，就像使用css显示none一样。在我的HTML下面，我想制作第二个小标签数据和最后一个子节点，即锚点数据显示无。如何实现请一些身体帮助我。我不能向他们添加类和ID。因为它的动态数据。

td small:nth-child(3) {
  display: none;
}

td:last-child {
  display: none;
}
<tbody>
  <tr>
    <td class="text-left">
      <a href="http://temp.goldenunicon.in/dutees_dev_env/index.php?route=product/product&amp;product_id=232">Polo Short Sleeve Cotton Tshirt</a>
      <small>
            Images: <br><div><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png" alt="" title="" class="img-thumbnail"></a></div>
          </small>
      <small>
          Color: <span title="black" style="background-color:#000000;display:inline-block;border:1px solid #ccc;width:25px;height:25px;cursor:pointer;outline:1px solid #229BCA;margin-left 4px;"></span></small>
      <small>Options: <dt>Size &amp; Quantity: </dt><dd>S  -  1; </dd><dt>Type Of Cloth: 160 gsm</dt><dt>Printing Type: screen</dt></small>
      <br> <br>
      <a href="index.php?route=tshirtecommerce/Designgner&amp;product_id=90&amp;parent_id=232&amp;cart_id=6bb84a5aa380b59c3a0a41be301e4844" title="">Edit Design</
        </td>
      </tr>
    </tbody>

2 个答案:

答案 0 :(得分：2)

nth-child可以在您的具体情况下工作，但不是您想要的。因为small:nth-child(2)会选择 FIRST 小元素。不是你想象中的第二个。但是会选择 SECOND 元素作为td的子元素。

例如，在下面的代码段中，第一个跨度是div的第3个子节点，您可以预期（从我在您的问题中看到的）使用span:first-child将选择它。但那个不的情况。

＆＃13;
＆＃13; 
/*not working*/
div span:first-child {
  color: red;
}
/*working*/

div span:nth-child(3) {
color:green;
}

div span:last-child {
color:blue;
}
＆＃13; 
<div>
  <h1>
    Title
  </h1>
  <p>
    Text
  </p>
  <span>span</span>
  <h2>
    h2 tag
  </h2>
  <a>Link</a>
  <br />
  <span>span2</span>
</div>
＆＃13;
＆＃13;
＆＃13;

因此，要选择 FIRST 范围，您可以使用nth-child(3)。但为什么span:last-child有效？因为它是div的最后一个孩子。不是因为它是最后一个跨度。这是因为nth-child选择元素，无论其类型如何

所以，为了给您提供更好的解决方案，请使用 nth-of-type ，在父级内的特定位置选择特定类型的子级。

在此处查看更多＆gt; nth-of-type

有关具体示例，请查看以下内容

＆＃13;
＆＃13; 
td > small:nth-of-type(3){
background:red;
}
td > a:last-of-type {
  background:green;
}
＆＃13; 
<table>
  <tr>
    <td class="text-left">
      <a href="http://temp.goldenunicon.in/dutees_dev_env/index.php?route=product/product&amp;product_id=232">Polo Short Sleeve Cotton Tshirt</a>
      <small>
        Images: <br><div><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png" alt="" title="" class="img-thumbnail"></a></div>
      </small>
      <small>
      Color: <span title="black" style="background-color:#000000;display:inline-block;border:1px solid #ccc;width:25px;height:25px;cursor:pointer;outline:1px solid #229BCA;margin-left 4px;"></span></small>
    <small>Options: <dt>Size &amp; Quantity: </dt><dd>S  -  1; </dd><dt>Type Of Cloth: 160 gsm</dt><dt>Printing Type: screen</dt></small>
      <br> <br>
      <a href="index.php?route=tshirtecommerce/Designgner&amp;product_id=90&amp;parent_id=232&amp;cart_id=6bb84a5aa380b59c3a0a41be301e4844" title="">Edit Design</a>
    </td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以使用small定位nth-of-type(2)代码的第二个外观。 在下面的代码片段中，我假设您始终将锚标记作为<td>中的最后一个元素。这就是我定位td a:last-child的原因。假设您想要隐藏任何最后出现的元素，那么您可以将元素定位为td > :last-child。

td small:nth-of-type(2){
display:none;
}
td a:last-child {
  display:none;
}
<table>
<tbody>
  <tr>
    <td class="text-left">
      <a href="http://temp.goldenunicon.in/dutees_dev_env/index.php?route=product/product&amp;product_id=232">Polo Short Sleeve Cotton Tshirt</a>
      <small>
        Images: <br><div><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png" alt="" title="" class="img-thumbnail"></a></div>
      </small>
    <small>
      Color: <span title="black" style="background-color:#000000;display:inline-block;border:1px solid #ccc;width:25px;height:25px;cursor:pointer;outline:1px solid #229BCA;margin-left 4px;"></span></small>
    <small>Options: <dt>Size &amp; Quantity: </dt><dd>S  -  1; </dd><dt>Type Of Cloth: 160 gsm</dt><dt>Printing Type: screen</dt></small>
      <br> <br>
      <a href="index.php?route=tshirtecommerce/Designgner&amp;product_id=90&amp;parent_id=232&amp;cart_id=6bb84a5aa380b59c3a0a41be301e4844" title="">Edit Design</a>
    </td>
  </tr>
</tbody>
</table>

相关问题
最新问题