css3 选择器
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢?
其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div{ height: 200px; font-size: 30px; color: rgb(96, 88, 125); text-align: center; } p{ height: 200px; font-size: 30px; text-align: center; } div:nth-child(2n+1){ background-color: #e2e2e2; } </style> <body> <p>0</p> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </body> </html>