Question

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

如何使用按钮类隐藏第一个元素？

Answer 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.

Answer 2

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

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

注意浏览器兼容性（不支持IE＆lt; 9），并且还注意到这只会起作用，因为所考虑的所有元素都是兄弟;如果它们分散在整个文档树中，那么用纯CSS就不可能做到这一点。

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

Answer 4

最好添加一个带预处理器的特殊类。因为“第一个类型”，“nth-of-child”和类似的浏览器不起作用

如何使用特定的css类隐藏页面上的第一个元素？

4 个答案: