E:nth-child(n) 表示E父元素中的第n个字节点
•p:nth-child(odd){background:red}/*匹配奇数行*/
•p:nth-child(even){background:red}/*匹配偶数行*/
•p:nth-child(2n){background:red}
•p:nth-child(2n+1){background:blue}
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
body *:nth-child(1){margin-left:10px;}/* 无论何种类型都选择第一个 */
p:nth-child(1){color:#fff;}
p:first-child{padding:20px;}
p:nth-last-child(1){color:#fff;}
p:last-child{padding-left:20px;}
p:nth-child(odd){background:red;}
p:nth-child(even){background:blue;}
h2:nth-of-type(2){background: green;}
p:nth-last-of-type(3){color:#999;}
h3:first-of-type{color:pink;}
h2:last-of-type{color:#fff;}
p:empty{height:40px;border:10px solid green;}
p *:only-child{border:10px dashed pink;}
p *:only-of-type{border:10px dashed pink;}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h2>h2</h2>
<p>p3</p>
<h3>h3</h3>
<p>p4</p>
<h2>h222</h2>
<p>p5</p>
<p></p>
<p><span>123</span></p>
<p><span>123</span><a>456</a></p>
</body>
</html>
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
时间： 2024-12-06 23:05:59