nth-child
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<title>nth-chile & nth-of-type</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
p:nth-child(odd){ //所有元素(p &hr)都包含在內計算奇數位置
background-color: red;
color: white;
}
</style>
</head>
<body>
<p>第1行第1行第1行第1行第1行第1行第1行第1行第1行第1行第1行</p>
<hr>
<p>第2行第2行第2行第2行第2行第2行第2行第2行第2行第2行第2行</p>
<hr>
<p>第3行第3行第3行第3行第3行第3行第3行第3行第3行第3行第3行</p>
<hr>
<p>第4行第4行第4行第4行第4行第4行第4行第4行第4行第4行第4行</p>
<hr>
<p>第5行第5行第5行第5行第5行第5行第5行第5行第5行第5行第5行</p>
<hr>
<p>第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行</p>
<hr>
<script type="text/javascript">
</script>
</body>
</html>
nth-of-type
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<title>nth-chile & nth-of-type</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
p:nth-of-type(odd){ // 只計算p元素的奇數位置
background-color: red;
color: white;
}
</style>
</head>
<body>
<p>第1行第1行第1行第1行第1行第1行第1行第1行第1行第1行第1行</p>
<hr>
<p>第2行第2行第2行第2行第2行第2行第2行第2行第2行第2行第2行</p>
<hr>
<p>第3行第3行第3行第3行第3行第3行第3行第3行第3行第3行第3行</p>
<hr>
<p>第4行第4行第4行第4行第4行第4行第4行第4行第4行第4行第4行</p>
<hr>
<p>第5行第5行第5行第5行第5行第5行第5行第5行第5行第5行第5行</p>
<hr>
<p>第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行第6行</p>
<hr>
<script type="text/javascript">
</script>
</body>
</html>
留言列表
Impression (1)
