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

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;
}

これは動作中の 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

プリプロセッサで特別なクラスを追加することをお勧めします。「first-of-type」、「nth-of-child」などはブラウザで機能しないため

于 2013-06-03T10:42:55.110 に答える
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 に答える