Question

我想用CSS删除最后两个span标签。我的代码是

<h1 class='av-special-heading-tag'  itemprop="headline"  >Turning </h1><div class='special-heading-border'><div class='special-heading-inner-border' ></div></div></div>
<span class="av_font_icon avia_animate_when_visible av-icon-style-  av-no-color avia-icon-pos-center " style=""><span class='av-icon-char' style='font-size:20px;line-height:20px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></span></span>
<section class="av_textblock_section"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_textblock '  style='font-size:20px; '  itemprop="text" ><p style="text-align: center;">
<span style="color: #641380;">Mazak Nexus 200MY</span><br />
<span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
<span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
<span style="color: #641380;"> Mazak SQT200M</span><br />
<span style="color: #641380;"> Mazak SQT10M</span><br />
<span style="color: #641380;"> Mazak Nexus</span><br />
<span style="color: #641380;"> Mazak QT10</span><br />
<span style="color: #641380;"> Mazak QT10</span><br />
<span style="color: #641380;"> Mazak QT8</span><br />
<span style="color: #641380;"> Mazak Colchester lathe</span><br />
<span style="color: #641380;"> Mazak Harrison lathe</span></p>
</div></section></div>

所以想要删除

<span style="color: #641380;"> Mazak Colchester lathe</span><br />
<span style="color: #641380;"> Mazak Harrison lathe</span></p>

使用Css 有关如何执行此操作的任何帮助。我由于问题而不想以任何其他方式执行此操作，因此无法使用可见性元素。

Answer 1

您可以使用nth-last-of-type(2)选择特定类型的倒数第二个元素，使用last-of-type选择最后一个元素。

您应该使用-of-type而不是last-child，因为您有一些br元素被视为子元素。如果您想使用last-child，则应删除所有br并将display:block提供给span，以便它们只保留1 /行

我注释掉了display：none并仅提供background-color仅用于示例目的。您可以“取消注释”display:none，这些元素将被隐藏。 display:none在隐藏元素方面是你用css做的最多的。你不能完全删除它们。

作为旁注，为什么所有跨度都具有完全相同的内联样式？你为什么不用Css呢？其他元素也有一堆内联样式..

p span:nth-last-of-type(2),p span:last-of-type {
    background:green;
    /*display:none*/
}

<h1 class='av-special-heading-tag' itemprop="headline">Turning </h1>
<div class='special-heading-border'>
  <div class='special-heading-inner-border'></div>
</div>
<div>
<span class="av_font_icon avia_animate_when_visible av-icon-style-  av-no-color avia-icon-pos-center " style=""><span class='av-icon-char' style='font-size:20px;line-height:20px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></span></span>
<section class="av_textblock_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork">
  <div class='avia_textblock ' style='font-size:20px; ' itemprop="text">
    <p style="text-align: center;">
      <span style="color: #641380;">Mazak Nexus 200MY</span><br />
      <span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
      <span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
      <span style="color: #641380;"> Mazak SQT200M</span><br />
      <span style="color: #641380;"> Mazak SQT10M</span><br />
      <span style="color: #641380;"> Mazak Nexus</span><br />
      <span style="color: #641380;"> Mazak QT10</span><br />
      <span style="color: #641380;"> Mazak QT10</span><br />
      <span style="color: #641380;"> Mazak QT8</span><br />
      <span style="color: #641380;"> Mazak Colchester lathe</span><br />
      <span style="color: #641380;"> Mazak Harrison lathe</span></p>
  </div>
</section>
</div>

如果它也删除了其他选项，只需使用更具体的选择器，例如.avia_textblock > p span:nth-last-of-type(2), .avia_textblock > p span:last-of-type { display:none}

Answer 2

使用以下代码：
:nth-last-of-type(-n+2)表示最后一个元素...
display:none;删除它们

section span:nth-last-of-type(-n+2){
display:none;
}

<h1 class='av-special-heading-tag'  itemprop="headline"  >Turning </h1><div class='special-heading-border'><div class='special-heading-inner-border' ></div></div></div>
<span class="av_font_icon avia_animate_when_visible av-icon-style-  av-no-color avia-icon-pos-center " style=""><span class='av-icon-char' style='font-size:20px;line-height:20px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></span></span>
<section class="av_textblock_section"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_textblock '  style='font-size:20px; '  itemprop="text" ><p style="text-align: center;">
<span style="color: #641380;">Mazak Nexus 200MY</span><br />
<span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
<span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
<span style="color: #641380;"> Mazak SQT200M</span><br />
<span style="color: #641380;"> Mazak SQT10M</span><br />
<span style="color: #641380;"> Mazak Nexus</span><br />
<span style="color: #641380;"> Mazak QT10</span><br />
<span style="color: #641380;"> Mazak QT10</span><br />
<span style="color: #641380;"> Mazak QT8</span><br />
<span style="color: #641380;"> Mazak Colchester lathe</span><br />
<span style="color: #641380;"> Mazak Harrison lathe</span></p>
</div></section>

Answer 3

CSS只会影响DOM的可视部分，因此您需要使用JavaScript来删除最后两项。你可以使用CSS选择器display: none;最后两个项目，但元素仍然在DOM中。

＆＃13;

.av_textblock_section span: nth-last-of-type(-n + 2) {
  display: none;
}

＆＃13;

<section class="av_textblock_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork">
  <div class='avia_textblock ' style='font-size:20px; ' itemprop="text">
    <p style="text-align: center;">
      <span style="color: #641380;">Mazak Nexus 200MY</span><br />
      <span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
      <span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
      <span style="color: #641380;"> Mazak SQT200M</span><br />
      <span style="color: #641380;"> Mazak SQT10M</span><br />
      <span style="color: #641380;"> Mazak Nexus</span><br />
      <span style="color: #641380;"> Mazak QT10</span><br />
      <span style="color: #641380;"> Mazak QT10</span><br />
      <span style="color: #641380;"> Mazak QT8</span><br />
      <span style="color: #641380;"> Mazak Colchester lathe</span><br />
      <span style="color: #641380;"> Mazak Harrison lathe</span></p>
  </div>
</section>

＆＃13;

如何使用CSS删除特定文本

3 个答案: