1、CSS简介
2、CSS引入方式
2.1 行内样式（内嵌样式）
<p style="font-size: 20px;color: black">CSS</p>
2.2 内部样式
<!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 外部样式
<!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 类选择器
<style>
.title {
color: green;
font-size: 50px;
}
.other {
color: rgb(134, 144, 112);
font-size: 30px;
}
</style>
3.3 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、伪类选择器
4.1 动态伪类选择器
<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>