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

Question

如何应用display: none; 到第五个元素（标题为“ SumoMe”），并确保仅隐藏SumoMe？

如果我使用.sumome-share-client-animated.sumome-share-client-share { display: none; } .sumome-share-client-animated.sumome-share-client-share { 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 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> 

属性选择器上的文档

Answer 2

使用nth-child选择sumome-share-client-share类的第5个元素，并使用display: none;隐藏该元素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(); 

将隐藏第五个<a> 。

注意：不需要附加的表单控件（ <input>和<button> ），它们只是用于输入数字进行演示。 假设您使用IRL，您将以编程方式或硬编码方式购买该号码，该号码实际上是：

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

片段中有进一步的细节评论。 选择一个数字0到4，然后单击“ 隐藏”按钮。

SNIPPET

 // 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>