CSS3是最新版本的CSS,包含了許多新的功能,其中很重要的一個就是CSS3集合。CSS3集合提供了一些新的選擇器,使得開發者可以更方便地選擇DOM元素。
CSS3集合包含以下四個選擇器:
E:first-child /*選擇E元素的第一個子元素*/ E:last-child /*選擇E元素的最后一個子元素*/ E:nth-child(n) /*選擇E元素的第n個子元素*/ E:nth-of-type(n) /*選擇E元素的第n個類型為E的子元素*/
下面是一些使用示例:
/*選擇表格中第一行(即表頭)的背景顏色*/ tr:first-child { background-color: gray; } /*選擇ul元素中第一個li元素的文字顏色*/ ul li:first-child { color: red; } /*選擇ol元素中第二個子元素的文字顏色*/ ol li:nth-child(2) { color: blue; } /*選擇div元素中第二個類型為p的子元素的文字顏色*/ div p:nth-of-type(2) { color: green; }
需要注意的是,CSS3集合只能選擇子元素,不能選擇父元素或其他非子元素。此外,瀏覽器兼容性也需要考慮,某些舊版本的瀏覽器可能不支持CSS3集合。所以在使用時,應該進行充分的測試和兼容性考慮。
上一篇css3陰影邊框