<!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>
<!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);}
<!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;}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
