3

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

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

4

4 回答 4

5

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

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

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

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

将其替换为等效的 CSS：

a.button {
  text-align:center;
}

这是一个工作的jsFiddle。

于 2013-06-03T10:16:10.847 回答
1

使用:first-of-typeCSS 选择器：

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

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

于 2013-06-03T10:16:12.760 回答
0

如果您希望您的代码与旧版本的浏览器（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>
于 2013-06-03T10:21:13.440 回答
0

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

于 2013-06-03T10:42:55.110 回答