隐藏具有完全相同类的元素

Question

如何将display: none;应用于第五个元素（标题为＆＃39; SumoMe＆＃39;）并确保仅隐藏SumoMe？

如果我使用.sumome-share-client-animated.sumome-share-client-share { display: none; }，则所有五个元素都会消失，因为它们具有相同的类。

＆＃13;

＆＃13;

<div data-sumome-share-pos="lp" class="sumome-share-client sumome-share-client-left-page sumome-share-client-light sumome-share-client-medium sumome-share-client-circle">

<a title="Facebook" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="facebook" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/facebook-black-60.png" alt="Facebook"></a>

<a title="Twitter" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="twitter" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/twitter-black-60.png" alt="Twitter">

</a><a title="Google+" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="googleplus" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/googleplus-black-60.png" alt="Google+"></a>

<a title="LinkedIn" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="linkedin" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/linkedin-black-60.png" alt="LinkedIn"></a>

<a title="SumoMe" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="sumome" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/sumome-black-60.png" alt="SumoMe"></a></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

利用attribute selector。

a[title="SumoMe"] { 
    display: none;
}

工作示例：

a[title="SumoMe"] {
  display: none;
}

<div data-sumome-share-pos="lp" class="sumome-share-client sumome-share-client-left-page sumome-share-client-light sumome-share-client-medium sumome-share-client-circle">

<a title="Facebook" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="facebook" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/facebook-black-60.png" alt="Facebook"></a>

<a title="Twitter" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="twitter" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/twitter-black-60.png" alt="Twitter">

</a><a title="Google+" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="googleplus" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/googleplus-black-60.png" alt="Google+"></a>

<a title="LinkedIn" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="linkedin" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/linkedin-black-60.png" alt="LinkedIn"></a>

<a title="SumoMe" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="sumome" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/sumome-black-60.png" alt="SumoMe"></a></div>

attribute selector

上的文档

Answer 2

使用nth-child选择包含课程sumome-share-client-share的第5个元素，并使用display: none;

隐藏该元素

.sumome-share-client-share:nth-child(5) {
  display: none;
  }

<div data-sumome-share-pos="lp" class="sumome-share-client sumome-share-client-left-page sumome-share-client-light sumome-share-client-medium sumome-share-client-circle">

<a title="Facebook" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="facebook" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/facebook-black-60.png" alt="Facebook"></a>

<a title="Twitter" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="twitter" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/twitter-black-60.png" alt="Twitter">

</a><a title="Google+" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="googleplus" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/googleplus-black-60.png" alt="Google+"></a>

<a title="LinkedIn" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="linkedin" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/linkedin-black-60.png" alt="LinkedIn"></a>

<a title="SumoMe" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="sumome" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/sumome-black-60.png" alt="SumoMe"></a></div>

Answer 3

如果您知道它是第五个元素，则可以使用nth-child(5)执行此操作：

.sumome-share-client.sumome-share-client-left-page.sumome-share-client-light.sumome-share-client-medium.sumome-share-client-circle > a:nt-child(5) {
    display: none;
}

或者你可以使用属性选择器：

.sumome-share-client.sumome-share-client-left-page.sumome-share-client-light.sumome-share-client-medium.sumome-share-client-circle > a[title=SumoMe] {
    display: none;
}

或者您可以设置id并使用#id选择器：

<div data-sumome-share-pos="lp" class="sumome-share-client sumome-share-client-left-page sumome-share-client-light sumome-share-client-medium sumome-share-client-circle">

<a title="Facebook" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="facebook" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/facebook-black-60.png" alt="Facebook"></a>

<a title="Twitter" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="twitter" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/twitter-black-60.png" alt="Twitter">

</a><a title="Google+" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="googleplus" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/googleplus-black-60.png" alt="Google+"></a>

<a title="LinkedIn" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="linkedin" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/linkedin-black-60.png" alt="LinkedIn"></a>

<a title="SumoMe" id="foobar" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="sumome" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/sumome-black-60.png" alt="SumoMe"></a></div>

和

#foobar {
    display: none;
}

Answer 4

在第五个元素上更改或添加一个类，然后显示无。

<a title="SumoMe" class="hide-me sumome-share-client-animated sumome-share-client-share" data-sumome-share="sumome" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;"><img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/sumome-black-60.png" alt="SumoMe"></a></div>

然后在你的CSS中：

.hide-me {
    display: none;
}

Answer 5

您可以通过标题引用它，例如：

[title=SumoMe] {
    display:none;
}

Answer 6

使用jQuery选择器.eq(n)（n=index number of target）。出于演示目的，我添加了一个文本框和按钮，它将使用输入的数字作为目标<a>来隐藏。函数的核心是这个表达式：

$('a:eq('+idx'+)').hide();

更通用的术语：

$('a:eq(4)').hide();

会隐藏第5个<a>。

注意：其他表单控件（<input>和<button>）不是必需的，只需输入一个数字进行演示即可。假设IRL您将以编程方式或硬编码方式获得该数字，其基本上是：

 $('a:eq(4)').hide(); 

Snippet进一步详细评论。选择一个0到4的数字，然后单击 隐藏 按钮。

<强>段

// When button#hide is clicked...
$('#hide').on('click', function() {

  /* ...the string value of input#index
  || is converted into a real number and
  || stored in var idx.
  */
  var idx = parseInt($('#index').val(), 10);

  /* To determine which <a> to hide, use the
  || jQuery selector :eq(n) where 'n' is the
  || INDEX NUMBER (0 COUNT) of the <a>s.
  */
  $('a:eq(' + idx + ')').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='index' type='number' min='0' max='4'>
<button id='hide'>HIDE</button>
<br/>
<br/>
<div data-sumome-share-pos="lp" class="sumome-share-client sumome-share-client-left-page sumome-share-client-light sumome-share-client-medium sumome-share-client-circle">

  <a title="Facebook" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="facebook" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;">
    <img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/facebook-black-60.png" alt="Facebook">
  </a>

  <a title="Twitter" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="twitter" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;">
    <img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/twitter-black-60.png" alt="Twitter">

  </a>
  <a title="Google+" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="googleplus" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;">
    <img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/googleplus-black-60.png" alt="Google+">
  </a>

  <a title="LinkedIn" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="linkedin" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;">
    <img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/linkedin-black-60.png" alt="LinkedIn">
  </a>

  <a title="SumoMe" class="sumome-share-client-animated sumome-share-client-share" data-sumome-share="sumome" href="javascript:void(0);" style="background: rgb(249, 199, 15); color: black; margin-bottom: 5px;">
    <img src="//sumome-140a.kxcdn.com/static/e712458c65fa75b6aaa4f4f9880230c43c634ce5/client/images/apps/9e8a4d2a-6f8c-415e-851b-bdfe4c01d5c1/sumome-black-60.png" alt="SumoMe">
  </a>
</div>