02、CSS3结构选择器

来源：互联网发布：edrawmax mac 注册码编辑：程序博客网时间：2024/05/01 17:35

:nth-child 选择指定索引处的子元素
nth-child(n) 父元素下的第n个子元素
nth-child(odd)奇数子元素(同nth-child(2n-1))
nth-child(even)偶数子元素(同nth-child(2n))
nth-child(an+b)公式

:nth-last-child(n) 倒数第n个子元素

:nth-of-type(n) 父元素下的第n个指定类型的子元素

:nth-last-of-type 父元素下的倒数第n个指定类型的子元素

:first-child 选择父元素下的第一个子元素

:last-child 选择父元素下的最后一个子元素

:only-child 选择父元素下唯一的子元素

:only-of-type选择父元素下指定类型的唯一子元素

:root 选择文档的根目录，返回html

<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/p{height:30px;background:#cc9966;margin-top:10px;}/*  :nth-child(n) 父元素下的第n个子元素  */div.wrap p:nth-child(1){width:200px;background:red;}div.wrap p:nth-child(5){background:red;}div.wrap div:nth-child(7){background:#aaa;height:50px;}/*  :nth-child(odd)奇数子元素(同nth-child(2n-1))  *//*div.wrap div:nth-child(7){background:#aaa;height:50px;}div.wrap p:nth-child(odd){width:200px;background:red;}*//*  :nth-child(even)偶数子元素(同nth-child(2n))  *//*div.wrap p:nth-child(even){width:200px;background:red;}*//*  :nth-child(an+b)公式 *//*div.wrap p:nth-child(3n+3){width:200px;background:red;}*//*  :nth-last-child(n) 倒数第n个子元素 *//*div.wrap p:nth-last-child(1){width:200px;background:red;}*//*  :nth-last-child(n) 倒数第n个子元素 *//*div.wrap p:nth-last-child(1){width:200px;background:red;}*//*  :nth-of-type(n) 父元素下的第n个指定类型的子元素 *//*div.wrap div:nth-of-type(2){width:200px;background:red;}*//*  :nth-last-of-type(n) 父元素下的倒数第n个指定类型的子元素 *//*div.wrap div:nth-last-of-type(2){width:200px;background:red;}*/</style></head><body><!--身体--><div class="wrap"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><div>7</div><div>8</div><div>9</div><div>10</div><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p></div></body></html>

0 0