1.实例演示选择器的优先级,id,class,tag;
<!DOCTYPE html><html lang="zh-CN"> <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> /* 1,1,3 */ html body h1#first.active { color: rgb(230, 17, 183); } /* id选择器,优先级大于class */ /* 1,0,3 */ html body h1#first { color: rgb(59, 17, 158); } /* 1,0,2 */ body h1#first { color: blue; } /* 选择器本身优先级大于书写顺序 */ /* 类样式 */ /* 0,1,2 */ html h1.active { color: seagreen; } /* 0,1,1 */ h1.active { color: yellow; } /* 标签 * * 优先级相同时,书写顺序决定优先级 */ /* 0, 0, 3 */ html body h1 { color: rgb(10, 133, 10); } /* 0, 0, 3 */ html body h1 { color: rgb(131, 39, 216); } </style> </head> <body> <h1 class="active" id="first">3月22日的练习</h1> <h2>id 大于 class 大于 tag，关键是要分清有多少个id,多少个class,多少个tag</h2> </body></html>
2.实例演示前端组件样式模块化的原理与实现;
<!DOCTYPE html><html lang="zh-CN"> <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> <!-- 使用外部样式方式一 --> <link rel="stylesheet" href="css/index.css" /> <!-- 使用外部样式方式二 --> <!-- <style> @import url(css/index.css); </style> --> </head> <body> <header>页眉</header> <main>主体</main> <footer>页脚</footer> </body></html><!--index.css文件-->@import url(header.css);@import url(main.css);@import url(footer.css);<!--heater.css文件-->header { min-height: 3em; background-color: rgb(143, 167, 245);}<!--main.css文件-->main { min-height: 20em; background-color: rgb(197, 231, 133);}<!--footer.css文件-->footer { min-height: 5em; background-color: rgb(144, 163, 226);}
3.实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）
<!DOCTYPE html><html lang="zh-CN"> <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> /* 选择任何一个: :nth-of-type(n) 选择第一个: :first-of-type 选择最后一个: :last-of-type 选择倒数某一个: :nth-last-of-type() 唯一子元素的元素: :only-of-type */ /* .list :nth-of-type(3) { background-color: lightgreen; } .list :first-of-type { background-color: red; } .list :last-of-type { background-color: blue; } .list > li:nth-last-of-type(3) { background-color: yellow; } ul li:only-of-type { background-color: yellow; } */ @import url(css/list.css); </style> </head> <body> <ul class="list"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> </ul> <ul> <li>item</li> </ul> </body></html> list.css文件/*伪类模块化列表*/.list :nth-of-type(3) { background-color: lightgreen; } .list :first-of-type { background-color: red; } .list :last-of-type { background-color: blue; } .list > li:nth-last-of-type(3) { background-color: yellow; } ul li:only-of-type { background-color: yellow; }
