CSS的所有child(子元素)選擇器如下:
E:first-child E:last-child E:nth-child(n) E:nth-last-child(n) E:only-child
1. E:first-child
選擇E元素作為其父元素的第一個子元素。
2. E:last-child
選擇E元素作為其父元素的最后一個子元素。
3. E:nth-child(n)
選擇父元素中第n個子元素作為E元素。
4. E:nth-last-child(n)
選擇父元素中倒數第n個子元素作為E元素。
5. E:only-child
選擇父元素只有一個子元素且該子元素為E元素。
例如:
/* 選擇父元素中第2個子元素為p元素 */ p:nth-child(2) { color: blue; } /* 選擇父元素中所有只有一個子元素且該子元素為input元素 */ input:only-child { border: 1px solid red; }
需要注意的是,child選擇器只會選擇父元素下的直接子元素,而不會選擇子元素的后代元素。
下一篇css扁平的菱形