77 lines
1.7 KiB
HTML
77 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>选择器进阶</title>
|
|
|
|
<!-- 基于基本选择器 -->
|
|
<style>
|
|
/* 子元素选择器 */
|
|
/* 父>子>子的子... { css代码 } */
|
|
/* #app>.top>p {
|
|
color: salmon;
|
|
} */
|
|
|
|
/* 后代选择器 */
|
|
/* 父 子(只要是父的后代)... { css代码 } */
|
|
/* #app p {
|
|
color: salmon;
|
|
} */
|
|
|
|
|
|
/* 组合选择器 */
|
|
/* 选择器1, 选择器2 { css代码 } */
|
|
/* .top,
|
|
#app>.bottom {
|
|
color: salmon;
|
|
} */
|
|
|
|
|
|
/* 复合选择器 (天选之子) */
|
|
div.top p.top-p.tp#ip {
|
|
color: salmon;
|
|
}
|
|
|
|
/* css3添加的 */
|
|
|
|
/* 正 */
|
|
/* ul li:nth-child(4){
|
|
color: salmon;
|
|
} */
|
|
|
|
/* 倒 */
|
|
/* ul li:nth-last-child(1) {
|
|
color: salmon;
|
|
} */
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
<div class="top">
|
|
<p class="top-p tp" id="ip"> <span>天地不仁</span> ，以万物为刍狗；圣人不仁，以百姓为刍狗。 </p>
|
|
</div>
|
|
<div class="bottom">
|
|
<p> <span>天地不仁</span> ，以万物为刍狗；圣人不仁，以百姓为刍狗。 </p>
|
|
</div>
|
|
<p> <span>天地不仁</span> ，以万物为刍狗；圣人不仁，以百姓为刍狗。 </p>
|
|
</div>
|
|
|
|
<ul>
|
|
<li>我是li1</li>
|
|
<li>我是li2</li>
|
|
<li>我是li3</li>
|
|
<li>我是li4</li>
|
|
<li>我是li5</li>
|
|
</ul>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |