css 选择器之子元素

/*html*/<div class="wrap"> ???<span>1</span> ???<span>2</span> ???<span>3</span> ???<span>4</span></div>/*css*/.wrap{ ???display:table; ???width: 200px;}.wrap span{ ???display:table-cell; ???text-align:center;}

nth-child(n)

//选择父元素下的第二个子元素，且为span.wrap span:nth-child(2){ ???color:red;}

但是如果子元素是混乱的，比如：

<div class="wrap"> ???<span>1</span> ???<p>p</p> ???<span>2</span> ???<span>3</span> ???<span>4</span></div>

nth-child(2)会选择第2个子元素，而且子元素必须是span，但是没找到（第二个子元素为p）

.wrap span:nth-child(3){ ???color:red;}

nth-child(3)会选择第3个子元素，而且子元素必须是span

相关

• nth-last-child(n) 从后往前找子元素

nth-of-type(n)

//选择父元素下的第二个span.wrap span:nth-of-type(2){ ???color:red;}

同样的html，nth-of-type(2) 会找到子元素的第2个span，不管有没有其他元素阻碍

相关

• nth-last-of-type(n) 从后往前找子元素

only-child

<div class="wrap"> ???<span>1</span></div> /*css*/.wrap span:only-child{ ???color:red;}

只有父元素下有一个子元素时，才会生效
当有其他任意标签时，不生效

only-child应用比较少

相关

• last-child 最后一个子元素

only-of-type

对比于only-child，only-of-type允许父元素下有其他类的子元素

// 这时会选中唯一的span元素<div class="wrap"> ???<span>1</span> ???<i>2</i></div> .wrap span:only-of-type{ ???color:red;}

相关

• first-of-type 选中第一个指定子元素
• last-of-type 选中最后一个指定子元素