如何隐藏具有特定 css 类的页面上的第一个元素？ [复制]答案

【问题标题】：How to hide the first element on the page with particular css class? [duplicate]如何隐藏具有特定 css 类的页面上的第一个元素？ [复制]
【发布时间】：2013-05-29 11:15:28
【问题描述】：

在 CSS（不是 javascript）中，如何隐藏具有特定类的第一个元素，而不是其他元素？请参见下面的示例：

<div class="wrap">
  <center>
    <a href="" class="button">hide this one</a>
  </center>
<div> Some other stuff</div>
  <center>
    <a href="" class="button">don't hide this one</a>
  </center>
</div>

如何隐藏带有按钮类的 first 元素？

【问题讨论】：

向第一个元素添加一个类会更好。

标签： html css

【解决方案1】：

一种选择是使用nth-of-type 选择器：

.button:nth-of-type(1) {
  display:none;
}

注意： IE9+、Chrome、Firefox、Safari 和 Opera（但不支持旧版 IE）支持此选择器。

此外，是时候删除<center> 标签了。从 HTML5 开始，它们已被删除。

用等效的 CSS 替换它：

a.button {
  text-align:center;
}

Here's a working jsFiddle.

【讨论】：

【解决方案2】：

使用:first-of-type CSS 选择器：

a.button:first-of-type { display: none; }

注意浏览器的兼容性（不支持 IE

【讨论】：

【解决方案3】：

如果您希望您的代码与旧版本的浏览器（IE8 等）一起使用。使用 jquery。

http://www.mkyong.com/jquery/jquery-toggle-example-to-display-and-hide-content/

示例：

<html>
 <head>
    <title>jQuery toggle to display and hide content</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script>
        $(document).ready(function() {
          $('.nav-toggle').click(function(){
            //get collapse content selector
            var collapse_content_selector = $(this).attr('href');                   

            //make the collapse content to be shown or hide
            var toggle_switch = $(this);
            $(collapse_content_selector).toggle(function(){
              if($(this).css('display')=='none'){
                                //change the button label to be 'Show'
                toggle_switch.html('Show');
              }else{
                                //change the button label to be 'Hide'
                toggle_switch.html('Hide');
              }
            });
          });

        }); 
        </script>
        <style> 
        .round-border {
            border: 1px solid #eee;
            border: 1px solid rgba(0, 0, 0, 0.05);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 5px;
        }
        </style>
    </head>
    <body>
        <section class="round-border">
            <h2>jQuery toggle() to hide/show collapse content</h2>
            <div>
                <button href="#collapse1" class="nav-toggle">Show</button>
            </div>
            <div id="collapse1" style="display:none">
                <p>Bla bla bla bla</p>
            </div>
        </section>
    </body>
</html>

【讨论】：

【解决方案4】：

最好添加一个带有预处理器的特殊类。因为“first-of-type”、“nth-of-child”和类似的在浏览器中不起作用

【讨论】：