CSS基础
1、CSS简介
CSS（层叠样式表）是一种文本标记语言，是修饰 HTML 和 XML 的标记语言。
2、CSS引入方式
2.1 行内样式（内嵌样式）
在标签中写入style="名值对"的形式，多个名值对之间使用;隔开，但是这种方法不太适合于属性过多的标签中，样式不能复用，不便于维护。
<p style="font-size: 20px;color: black">CSS</p>
2.2 内部样式
将CSS样式从HTML标签中分离出来，可以在同一HTML文件中多次利用，一般写入head内。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>p {font-size: 40px;color: red;}</style>
</head><body><p>CSS</p><p>CSS</p>
</body></html>
2.3 外部样式
将CSS样式写入独立的文件中，HTML文件中需要使用时，导入链接，使得不同HTML文件样式可以复用；
用户浏览网页时CSS样式文件会被暂时缓存，继续浏览其他网页时会优先使用缓存中的文件。避免重复下载，大大提高了网页的加载效率。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>行内样式</title>
</head><body><p style="font-size: 20px;color: red">CSS</p>
</body></html>
2.4 优先级
行内样式 > 外部样式表 = 内部样式表，同级别或同一样式表中后面的样式会覆盖前面的样式。
3、CSS选择器
3.1 通配选择器
选择所有元素。
<style>* {font-size: 30px;color: blue;}
</style>
3.2 类选择器
根据元素的class值，选中某些元素。
<style>.title {color: green;font-size: 50px;}.other {color: rgb(134, 144, 112);font-size: 30px;}
</style>
3.3 ID选择器
根据元素的ID值精准选取元素。元素的id不能包含空格。
<style>#top1 {color: green;font-size: 30px;}#top2 {color: rgb(74, 18, 194);font-size: 30px;}
</style>
3.4 交集选择器
选中同时符合多个条件的元素。
<style>span.other {font-size: 15px;color: bisque;}
</style>
3.5 并集选择器
选中多个选择器对应的元素，又称为分组选择器。
3.6 后代选择器
选中指定元素中，符合要求的后代元素。（只选择后代元素）
<style>ul li {color: red;}ol li span {color: red;}.zu1 li {color: aqua;}
</style>
3.7 子代选择器
选中指定元素中符合要求的子元素。（只选择子元素）
<style>ol>li {color: red;}
</style>
3.8 兄弟选择器
3.8.1 相邻兄弟选择器
选中指定元素后，紧紧相邻的兄弟元素。
<style>div+li {color: aqua;}
</style>
3.8.2 通用兄弟选择器
选中指定元素后所有符合条件的元素。
<style>div~li {font-size: 40px;}
</style>
3.9 属性选择器
语法：
- 1、[属性名]：选中具有某个属性的元素；
- 2、[属性名=属性值]：选中属性名具有指定值的元素；
- 3、[属性名=^属性值]：选中属性值以指定值开头的元素；
- 4、[属性名=$属性值]：选中属性值以指定值结尾的元素；
- 5、[属性名=*属性值]：选中属性值包含指定值的元素。
4、伪类选择器
伪类选择器通常用于根据元素的状态或位置来更改样式，而不是根据其固有的类或ID。它们以冒号开头（
:），后面跟着伪类的名称。
4.1 动态伪类
伪类选择器是一种特殊的CSS选择器。它允许在不改变HTML结构的情况下，根据用户的动作来更改样式。
<style>/* 正常显示标签属性 */a:link {color: red;}/* 访问过的标签属性 */a:visited {color: yellow;}/* 鼠标悬浮标签属性 */a:hover {color: blue;}/* 标签激活属性 */a:active {color: green;}/* 聚焦标签属性 */select:focus {color: red;}
</style>
4.2 结构伪类
结构伪类选择器根据元素在结构树中的位置来选定元素。
4.2.1 一般结构伪类
<style>/* 选择所有div第一个子类元素为p标签的元素 *//* div>p:first-child {color: red;} *//* 选择所有div最后一个子类元素为p标签的元素 *//* div>p:last-child {color: red;} *//* 选择所有div奇数个子类元素为p标签的元素 *//* div>p:nth-child(2n+1) {color: red;} *//* 选择div同类元素的第一个子类元素 *//* div>p:first-of-type {color: red;} *//* 选择div同类元素的最后一个子类元素 *//* div>p:last-of-type {color: red;} *//* 选择div同类元素的偶数子类元素 */div>p:nth-of-type(2n) {color: red;}
</style>
4.2.2 特殊结构伪类（了解即可）
- :nth-last-child(n) 所有兄弟元素中的倒数第n个
- :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
- :only-child 选择没有兄弟的元素
- :root 根元素
- :empty 内容空的元素（空格也不能有）
4.3 否定伪类
选中排除某些属性的元素。
<style>/* 选中div除了第一个子类元素 *//* div>p:not(:first-child) {color: red;} *//* 选中div除了属性名class为last的元素 */div>p:not([class="last"]) {color: aqua;}
</style>
4.4 UI伪类
应用在带框、按钮、表单等可视、可交互的元素上
<style>/* 被选中的元素 */input:checked {width: 100px;height: 100px;}/* 不可修改的元素 */input:disabled {width: 100px;height: 100px;}/* 可修改的元素 */input:enabled {background-color: antiquewhite;}
</style>
4.5 目标伪类
选中锚点指向的元素。
<style>div {width: 600px;height: 500px;background-color: antiquewhite;}div:target {background-color: red;}
</style>
4.6 语言伪类
根据标记语言选取元素。
<style>/* 选择所有语言为en的元素，只要标记为en即可 */:lang(en) {color: red;}/* 默认语言为中文 */:lang(zh-CN) {color: green;}
</style>
5、伪元素选择器
伪元素选择器也是CSS中的一种特殊类型的选择器，它们用于选取和操作页面中不是实际DOM元素的部分。伪元素选择器以两个冒号开头（
::），后面跟伪元素的名称。
<style>/* 选中第一个文字 */div::first-letter {color: red;font-size: 20px;}/* 选中第一行文字 */div::first-line {color: rgb(72, 0, 255);}/* 被选中的元素 */div::selection {color: aqua;}/* 输入框内的提示文字 */input::placeholder {color: green;}/* 元素之前的字符 */p::before {content: "*";}/* 元素之后的字符 */p::after {content: ".";}
</style>
6、选择器优先级
6.1 简单分级
- 1、内联样式
- 2、ID选择器
- 3、类选择器/属性选择器
- 4、标签名选择器/伪元素选择器
- 5、通配符选择器/子代选择器
- 6、用户代理表（浏览器默认样式设置）
6.2 复杂分级
格式：（a, b, c），从左到右依次比较，全部相同则后"来者居上"，以后面的属性为主。
字母 含义 a ID选择器的个数 b 类、伪类、属性选择器的个数 c 元素、伪元素选择器的个数
<style>/* (1, 3, 5) */div.containter>li div.info a#top1>span:nth-child(1) {color: red;}/* (1, 1, 2) */a#top1>span:nth-child(1) {color: green;}/* 在属性值后面若有!important,则该属性优先级最高 */span.title {color: pink !important;}
</style>
- 注意：
- 行内样式权重大于所有选择器；
- !important的权重大于所有选择器（包括行内选择器）