目录
一、什么是CSS?
二、CSS 选择器
1. 标签选择器
2. 类选择器
3. ID选择器
4. 通配符选择器
5. 复合选择器
一、什么是CSS?
CSS(Cascading Style Sheet),层叠样式表。它与 HTML(超文本标记语言)一起使用,用于控制页面的样式。
CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果。能够做到页面的样式和结构分离。
CSS 可以理解为“东方四大邪术”之化妆术。对页面的展示进行“化妆”。
二、CSS 选择器
CSS 选择器的主要功能就是选中页面指定的标签元素。选中元素后,对元素的属性进行设置。
认识 CSS 选择器之前,需要先了解一下 CSS 的引入方式,在HTML文档中引入CSS样式表有三种主要的方式:
1. 内联样式:内联样式是直接将CSS样式写在HTML元素的style
属性中,仅对该元素生效。这种方式适用于只需要应用样式到少数几个元素的情况。
<div style="color: red; font-size: 20px;">这是一个红色的文字</div>
2. 内部样式表:内部样式表是将CSS代码直接写在HTML文档的<style>
标签内,通常放在<head>
标签中。这种方式适用于只在当前页面使用的样式,或者需要针对特定页面进行定制化样式的情况。
<head>
<style>
/* CSS样式 */
body {
background-color: #f0f0f0;
}
</style>
</head>
3. 外部样式表:外部样式表是将CSS代码写入一个独立的.css
文件中,并通过<link>
标签将其链接到HTML文档中。这种方式的优点是可以将样式与内容分离,方便管理和维护,并且可以在多个页面中重复使用相同的样式。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
此处通过 HTML 代码演示 CSS 选择器的使用,以下演示使用内部样式表的方式引入 CSS 选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="font32">我是⼀个div, class为font32</div>
<div class="font32">我是⼀个div, class为font32</div>
<div><a href="#">我是⼀个div</a></div>
<!-- 无序列表 -->
<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#">ccc</a></li>
</ul>
<!-- 有序列表 -->
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<button id="submit">提交</button>
</body>
</html>
代码初始效果如下:
CSS选择器主要分为以下几种:
1. 标签选择器
标签选择器是CSS中最简单的选择器之一,它通过选择HTML元素的标签名称来应用样式。此处在以上代码 head 中引入 CSS 选择器:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
color: green;
}
</style>
</head>
2. 类选择器
类选择器用于选择具有相同类名的元素,并为它们应用相同的样式。类选择器以.
开头,后面跟着类名。在前面代码 head 中再添加一个类选择器:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
color: green;
}
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
font-size: 32px;
}
</style>
</head>
- 一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分隔,这种做法可以让代码更好复用)
3. ID选择器
ID选择器是CSS中用于选择具有特定id属性的元素的选择器。ID选择器以#
符号开头,后跟着id属性的值。
与类选择器不同,id选择器是唯一的,每个HTML文档中的元素都应该具有唯一的id。因此,id选择器通常用于针对单个元素应用特定样式或JavaScript操作。
在前面代码 head 中再添加一个ID选择器:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
color: green;
}
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
font-size: 32px;
}
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
color: red;
}
</style>
</head>
4. 通配符选择器
通配符选择器(Universal Selector)在CSS中用 *
表示,它匹配文档中的任何元素。通配符选择器将应用样式于文档中的所有元素,包括HTML元素、内联元素和已应用类和id的元素。通常使用于设置默认参数。
5. 复合选择器
复合选择器是指由多个简单选择器组合而成的选择器,用于更精确地选中文档中的元素。复合选择器可以根据元素的类型、类、ID等属性来进行选择。
例如:想把上述代码中 ul 标签下的 li 标签下的 a 标签,设置为黄色,此时就可以使用复合选择器,还是在前面代码 head 中再添加一个复合选择器:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
color: green;
}
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
font-size: 32px;
}
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
color: red;
}
/*只设置 ul 标签下的 li 标签下的 a 标签, 颜⾊为黄色*/
ul li a {
color: yellow;
}
</style>
</head>
以上三个标签选择器 ul li a 中的任意,都可以替换成类选择器,或者ID选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合。
这种以空格分隔的多个选择器,称为复合选择器中的后代选择器。
除 1. 后代选择器 外,常见的复合选择器还包括:
2. 子代选择器:以 >
分隔的两个简单选择器,用于选择指定元素的直接子元素。
ul > li {
/* 选中 ul 元素的直接子元素 li 元素 */
}
3. 相邻兄弟选择器:以 +
分隔的两个简单选择器,用于选择指定元素之后紧跟的同级兄弟元素。
h2 + p {
/* 选中紧跟在 h2 元素之后的 p 元素 */
}
4. 通用兄弟选择器:以 ~
分隔的两个简单选择器,用于选择指定元素之后的所有同级兄弟元素。
h2 ~ p {
/* 选中在 h2 元素之后的所有 p 元素 */
}
除以上四种常见的复合选择器外,还有交集选择器和并集选择器等。
- 交集选择器使用无连接符将两个选择器组合在一起,表示选择同时满足两个选择器的元素。
- 并集选择器使用逗号将多个选择器组合在一起,表示选择多个选择器中的任意一个选择器代表的元素。