39. css概念、选择器
1. css的概念
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML文档的表现形式的样式语言。它被设计用于将网页的内容与表现形式分离，可以控制网页的外观和布局，包括间距、颜色、字体等视觉元素，而不需要直接修改HTML的结构。
2. 语法结构
选择符 {
样式属性: 样式属性值;
样式属性: 样式属性值;
样式属性: 样式属性值, 样式属性值, 样式属性值;
}
2. 注释语法
/* 这是注释 */
3. 引入css的方式
3.1 head内style标签内部直接编写css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: aqua;
}
</style>
</head>
<body>
<p>avril lavigne</p>
</body>
</html>
3.2 head内link标签引入外部css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="newcss.css">
</head>
<body>
<p>avril lavigne</p>
</body>
</html>
3.3 行内式
标签内部通过style属性直接编写
将HTML和css糅合到了一起（不推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color: blue">avril lavigne</p>
</body>
</html>
4. 基本选择器
4.1 标签选择器（范围查找）
通过标签名查找标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1>avril</h1>
<h1>lavigne</h1>
<h1>haaland</h1>
</body>
</html>
4.2 类选择器（范围查找）
通过标签的class属性查找标签 .类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1 class="c1">avril</h1>
<h1 class="c1">lavigne</h1>
<h1 class="c2">haaland</h1>
</body>
</html>
4.3 id选择器（精确查找）
通过标签的id属性查找标签 #id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
color: lightseagreen;
}
</style>
</head>
<body>
<h1 class="c1" id="d1">avril</h1>
<h1 class="c1" id="d2">lavigne</h1>
<h1 class="c2" id="d3">haaland</h1>
</body>
</html>
5. 关系选择器
5.1 分类
后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器
5.2 演示说明
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
通过嵌套来表示标签关系：
[1]对于div1来说，div2、p2、span2是子代
[2]对于div1来说，内部的所有标签无论层级都是div1的后代
[3]div2、p2、span2是兄弟
5.3 代码
[1] 子代选择器
关键符号是大于号
查找id是d1标签内部所有的子代span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 > span {
color: blueviolet;
}
</style>
</head>
<body>
<div id="d1">div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
<span>span3</span>
</div>
</body>
</html>
[2]后代选择器
关键符号是空格
查找id是d1标签内部所有的后代span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 span {
color: blueviolet;
}
</style>
</head>
<body>
<div id="d1">div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
<span>span3</span>
</div>
</body>
</html>
[3]相邻兄弟选择器
关键符号是加号
查找id是d2标签同级别紧随其后的span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d2 + span {
color: blueviolet;
}
</style>
</head>
<body>
<div id="d1">div1
<div>div2
<p>p1</p>
</div>
<p id="d2">p2
<span>span1</span>
</p>
<span>span2</span>
<span>span3</span>
</div>
</body>
</html>
[4]通用兄弟选择器
关键符号是波浪号
查找id是d2标签同级别下所有的h1标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d2 ~ h1{
color: blueviolet;
}
</style>
</head>
<body>
<div>div1
<div id="d2">div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
<h1>avril</h1>
<h1>lavigne</h1>
</div>
</body>
</html>
6. 属性选择器
根据标签内部的属性名和属性值查找标签（关键符号是中括号）
方式一：直接通过属性名查找
将带有id属性的标签背景颜色改为blueviolet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[id] {
background: blueviolet;
}
</style>
</head>
<body>
<input type="text" name="aaa" id="1">
<input type="text" name="bbb" id="2">
<p id="3">avril</p>
<p id="4">lavigne</p>
</body>
</html>
方式二：属性名+属性值
将属性名为id，属性值为1的标签背景颜色改为blueviolet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[id="1"] {
background: blueviolet;
}
</style>
</head>
<body>
<input type="text" name="aaa" id="1">
<input type="text" name="bbb" id="2">
<p id="3">avril</p>
<p id="4">lavigne</p>
</body>
</html>
方法三：标签名+属性名+属性值
将标签名为p、属性名为id、属性值为3的标签背景颜色改为blueviolet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[id="3"] {
background: blueviolet;
}
</style>
</head>
<body>
<input type="text" name="aaa" id="1">
<input type="text" name="bbb" id="2">
<p title="666" id="3">avril</p>
<p title="666" id="4">lavigne</p>
</body>
</html>
7. 分组与嵌套
7.1 分组
[1] 语法
/*查找div或者p或者span*/
div, p, span {
color: red;
}
[2]示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: blue;
}
p {
color: blue;
}
span {
color: blue;
}
</style>
</head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>
上述方法，重复代码造成了代码的冗余
[3]优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 逗号表示并列关系 */
div,span,p {
color: blue;
}
</style>
</head>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>
7.2 嵌套
/*查找id是d1或者class包含c1或者span*/
#d1, .c1, span {
color: red;
}
7.3 综合运用
div#d1 查找id是d1的div标签
div.c1 查找class包含c1的div标签
div #d1 查找div内部id是d1的后代标签
#d1>.c1 查找id是d1的内部class包含c1的子代标签
8. 伪类选择器
8.1 hover
设置鼠标悬停在标签时的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: grey;
}
p:hover {
color: deepskyblue;
}
</style>
</head>
<body>
<p>Avril lavigne</p>
</body>
</html>
8.2 focus
设置标签在成为输入焦点时的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input:focus {
background-color: deepskyblue;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
9. 伪元素选择器
作用：通过css来操作文本内容
[1] 修改首个字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter {
color: deepskyblue;
font-size: 30px;
}
</style>
</head>
<body>
<p>avril lavigne</p>
</body>
</html>
[2]在文本开头添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:before {
content: 'usa';
color: blue;
}
</style>
</head>
<body>
<p>avril lavigne</p>
</body>
</html>
[3]在文本结尾添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:after {
content: 'usa';
color: deepskyblue;
}
</style>
</head>
<body>
<p>avril lavigne</p>
</body>
</html>
使用场景：
(1)用于清除浮动带来的影响
(2)用于网站的内容防爬
浙公网安备 33010602011771号