:only-child

选择所有的独生子元素。

如果某个元素是他父元素下唯一的子元素,那他就会被匹配到。换句话说,如果某个元素有同辈元素,则不会被匹配到。

示例:

在每个 div 中查找没有同辈的 button 按钮,并且改变这些按钮的外观。

<!DOCTYPE html>
<html>
<head>
<style>

  div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
  </style>
<script src="jquery.min.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>
演示:
结果:
[ <li>Glen</li> ]