收藏
天蓬老师批改状态：合格
老师批语：
优先级相同时，书写顺序决定优先级
选择器本身优先级大于书写顺序
样式声明优先级： id > class > tag
<!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><!-- 内部样式，仅作用于该文档 --><style>/* 样式声明优先级： id > class > tag *//* 1,1,0 */#str.abc {color: violet;}/* 1,0,0 */#str {color: gold;}/* 0,1,0 */.act {color: tomato;}/* 选择器本身优先级大于书写顺序 *//* 类样式 *//* 0,0,2 */body h1 {color: green;}/* 优先级相同时，书写顺序决定优先级 *//* 0,0,1 */h1 {color: red;}</style></head><body><h1>HELLO WORLD</h1><!-- 行内样式的优先级要高于style标签设置的内部样式 --><h1 style="color: blue">HELLO WORLD</h1><h1 class="act">HELLO WORLD</h1><h1 class="act" id="str">HELLO WORLD</h1><h1 class="abc" id="str">HELLO WORLD</h1></body></html>
网站大量网页所共用的CSS样式表，推荐采用模块化书写方式，统一单独文件编写存储，在需要的网页文件中链接引用。
<!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><link rel="stylesheet" href="css/index.css" /></head><body><header>页头</header><main>主体</main><footer>页脚</footer></body></html>
css/index.css文件：
header {background-color: lightblue;height: 5em;color: #fff;}footer {background-color: lightblue;height: 5em;color: red;}main {background-color: orange;height: 10em;}
<!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>.idx li {background-color: lightgreen;}/* 结构伪类: 选择子元素, 要有一个父元素做为查询起点 *//* .idx > :nth-child(3) {background-color: violet;} *//* 匹配任何位置的元素n = (0,1,2,3,4....) *//* .idx > li:nth-child(0n + 3) {background-color: violet;} *//* 分组伪类结构选择器,推荐使用 */.idx li:first-of-type {background-color: violet;}.idx li:last-of-type {background-color: yellow;}.idx > li:nth-of-type(3) {background-color: cyan;}.idx p:last-of-type {background-color: blue;color: white;}.idx p:nth-last-of-type(3) {background-color: brown;color: white;}/* 选择任何一个: :nth-of-type(n)选择第一个: :first-of-type选择最后一个: :last-of-type选择倒数某一个: :nth-last-of-type()唯一子元素的元素: :only-of-type */</style></head><body><ul class="idx"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><p>item6</p><p>item7</p><p>item8</p><li>item9</li><li>item10</li></ul></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
