• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :only-child

    如果某个元素是其父元素的唯一子元素,那么它就会被选中。

    jQuery(":only-child")

    若父元素有其他子元素,就不会被匹配。

    例子

    若每个 div 中只有一个按钮,则改变这些按钮的外观。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <div>
      <button>Sibling!</button>
      <button>Sibling!</button>
    </div>
     
    <div>
      <button>Sibling!</button>
    </div>
    <div>
      None
    </div>
     
    <div>
      <button>Sibling!</button>
      <button>Sibling!</button>
      <button>Sibling!</button>
     
    </div>
    <div>
      <button>Sibling!</button>
    </div>
    <script>
      $("div button:only-child").text("Alone").css("border", "2px blue solid");
    </script>
     
    </body>
    </html>