选择器的优先级演示
代码段
<!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>Document</title> </head> <style> li { background-color: lightgreen; } .tian { background-color: lightskyblue; } #peng { background-color: lightslategray; } </style> <body> <div class="list"> <ul> <li>天蓬老师最帅1</li> <li class="tian">天蓬老师最帅2</li> <li class="tian" id="peng">天蓬老师最帅3</li> <li>天蓬老师最帅4</li> <li class="tian">天蓬老师最帅5</li> <li>天蓬老师最帅6</li> </ul> </div> </body></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>Document</title> </head> <style> /* 引入页面样式 */ @import url(index.css); </style> <body> <!-- 网页头部 --> <header> <div class="header">头部</div> </header> <!-- 主题内容 --> <main> <div class="main">主体</div> </main> <!-- 底部 --> <footer> <div class="footer">底部</div> </footer> </body></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>Document</title> </head> <style> /* 选择第一个 */ .list ul :first-of-type { background-color: limegreen; } /* 最后一个 */ .list ul :last-of-type { background-color: #f00; } /* 倒数第3个 */ .list ul :nth-last-of-type(3) { background-color: #333; } /* 正数第5个 */ .list ul :nth-of-type(5) { background-color: #999; } /* 仅有的一个元素 */ .list ul :only-of-type { background-color: pink; } /* 选择奇数行 */ .list ol :nth-of-type(2n-1) { background-color: magenta; } </style> <body> <div class="list"> <ul> <li>天蓬老师最帅！1</li> <li>天蓬老师最帅！2</li> <li>天蓬老师最帅！3</li> <li>天蓬老师最帅！4</li> <li>天蓬老师最帅！5</li> <li>天蓬老师最帅！6</li> <li>天蓬老师最帅！7</li> <li>天蓬老师最帅！8</li> <li>天蓬老师最帅！9</li> <p>天蓬老师最帅！</p> </ul> <ol> <li>你说得对！1</li> <li>你说得对！2</li> <li>你说得对！3</li> <li>你说得对！4</li> <li>你说得对！5</li> </ol> </div> </body></html>
