1.css 样式的优先级
1.1 !important > 行内样式 > style 标签设置的内部样式
<!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><!-- 内部样式,仅作用于当前的html文档 --><style>h1 {color: hotpink;/* !important 级别最高的,不建议用,适用于调试 *//* color: lawngreen !important; */}</style></head><body><!-- 行内样式,仅适用于当前元素,优先级要高于style标签设置的内部样式 --><h1 style="color: goldenrod">hello world!</h1><h1>hello world!</h1></body></html>
1.2 id 选择器 > class 选择器 > 标签选择器
<!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>/* 选择器优先级的等级：1.优先级相同时,书写顺序决定优先级2.id选择器 > class选择器 > 标签选择器*/h1 {color: hotpink;}h1 {color: lawngreen;}#first {color: red;}.active {color: lightsalmon;}</style></head><body><!-- 行内样式,仅适用于当前元素,优先级要高于style标签设置的内部样式 --><h1 class="active" id="first">hello world!</h1></body></html>
2.外部 CSS 样式引入的方式
<!-- 1. style 标签引入 --><style>@import url(style.css);</style><!-- 2. link 标签引入 --><link rel="stylesheet" href="style.css" />
3.前端组件样式模块化的原理与实现
前端组件模块化的原理：把前端页面主体分为几个不同的部分，在不同的 css 文件中进行样式操作。
<!-- index.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="index.css" /></head><body><header>页眉</header><main>主体</main><footer>页脚</footer></body></html>
/* index.css 文件 */@import url(header.css);@import url(main.css);@import url(footer.css);
4.伪类选择器
4.1 伪类选择器的使用方式
- 选择任何一个: :nth-of-type(n)
- 选择第一个: :first-of-type
- 选择最后一个: :last-of-type
- 选择倒数某一个: :nth-last-of-type()
- 唯一子元素的元素: :only-of-type
<!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>/* 选中ul下的第三个li */ul li:nth-child(3) {background-color: gray;}/* 选中 ul 下的第一个li */ul li:first-child {background-color: blue;}/* 选中 ul 下的最后一个li */ul li:last-child {background-color: hotpink;}/* 选中 ul 下倒数第二个 li */ul li:nth-last-of-type(2) {color: hotpink;}/* 选择任何一个: :nth-of-type(n)选择第一个: :first-of-type选择最后一个: :last-of-type选择倒数某一个: :nth-last-of-type()唯一子元素的元素: :only-of-type */</style></head><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body></html>
4.2 用伪类来模块化元素组件
1）获取到页面中某个元素组件的入口，用伪类操作子元素
<!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>/* 只要获取到页面中某个元素组件的入口,再根据子元素的位置,使用伪类就可以选择任何一个元素了 *//* 选择首页 */.index {background-color: yellow;}/* .menu是入口 */.menu :first-of-type {background-color: lightgreen;}.menu :last-of-type {background-color: lightgreen;}.menu :nth-last-of-type(2) {background-color: yellow;}</style></head><body><nav class="menu"><a href="">首页</a><a href="">视频 </a><a href="">下载</a><a href="">注册/登录</a></nav></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><style>/* 只要获取表单的入口,使用伪类可以获取表单中任何一个控件 *//* 获取到提交按钮 */.login :only-of-type {background-color: seagreen;color: white;}/* 文本框中输入字体为红色 */.login input:first-of-type {color: red;}</style></head><body><form action="" style="display: grid; gap: 1rem" class="login"><input type="text" placeholder="UserName" /><input type="password" placeholder="Password" /><input type="email" placeholder="demo@email.com" /><button>提交</button></form></body></html>
