您的位置：首页 > Web前端 > CSS

02、CSS3结构选择器

2016-08-02 09:08 459 查看
: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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航