目录
CSS选择器
基本选择器
标签选择器：使用标签名作为选择器->选中同名标签设置样式
类选择器：给类选择器定义一个名字.类名，并给标签添加class="类名"
id选择器：跟类选择器非常相似，给id选择器定义一个名字#id，并给标签添加class="id"
通配符选择器 : *
复合选择器
后代选择器
子代选择器
并集选择器
伪类选择器
超链接状态
:link （点击前的状态）
:visited （点击后的状态）
:hover (鼠标悬停的状态)
:active (点击时的状态)
CSS选择器
作用：查找标签，设置样式
分类：CSS基本选择器和CSS高级选择器（扩展类）
基本选择器
作用：查找元素，对元素进行修饰
分类：标签选择器，类选择器，id选择器，通配符选择器
-
标签选择器：使用标签名作为选择器->选中同名标签设置样式
<html>
<head>
<title>网页标题</title>
<style>
div{
font-size:px
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
-
类选择器：给类选择器定义一个名字.类名，并给标签添加class="类名"
作用：为了使相同的标签具有差异化
<html>
<head>
<title>网页标题</title>
<style>
.green{
color:green;
}
</style>
</head>
<body>
<p class="green">what can i say</p>
</body>
</html>
-
id选择器：跟类选择器非常相似，给id选择器定义一个名字#id，并给标签添加class="id"
<html>
<head>
<title>网页标题</title>
<style>
#green{
color:green;
}
</style>
</head>
<body>
<p id="green">what can i say</p>
</body>
</html>
-
通配符选择器 : *
作用：查找页面所有标签，设置相同样式
<html>
<head>
<title>网页标题</title>
<style>
* {
color:green;
font-size: 30;
}
</style>
</head>
<body>
<p >what can i say</p>
<p>man<p>
</body>
</html>
复合选择器
复合选择器由两个或两个以上的基本选择器组成
作用：可以更加高效，准确的选择目标元素
分类：后代选择器，子选择器，并集选择器
-
后代选择器
作用：选中某元素的后代元素
选择器写法：父选择器 子选择器{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>
<style>
div span{
font-size: 50px;
}
</style>
</head>
<body>
<div>
<span><p>hello world</p></span>
</div>
<span><p>hello world</p></span>
</body>
</html>
-
子代选择器
作用：选中某元素的后代元素
选择器写法：父选择器>子选择器{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>
<style>
div>p{
font-size: 50px;
}
</style>
</head>
<body>
<div>
<span>hello world</span> <!--这里span和p是同级的-->
<p>你好世界</p>
</div>
</body>
</html>由于这里的span和p是同级的，如果用 后代选择器的写法span和p里面的字体都会被修改
-
并集选择器
作用：选中多组标签设置相同的样式
选择器写法：选择器1，选择器2，...,选择器N{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>
<style>
div,
span,
p{
font-size: 50px;
}
</style>
</head>
<body>
<div> 你好你好</div>
<span>hello world</span> <!--这里span和p是同级的-->
<p>你好世界</p>
</body>
</html> 
伪类选择器
作用：伪类表示元素的状态，选中元素的某个状态设置样式
超链接一共有4个状态：
- 点击前
- 点击后
- 鼠标悬停
- 点击时
超链接状态
:link （点击前的状态）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{
color:red;
}
</style>
</head>
<body>
<div> 你好你好</div>
<span><p>hello world</p></span>
<a href="KD.html">凯文杜兰特</a>
</body>
</html>:visited （点击后的状态）
a:visited{
color:red;:hover (鼠标悬停的状态)
a:hover{
color:red;:active (点击时的状态)
a:active{
color:red;
![[Kubernetes] Rancher 2.7.5 部署 k8s](https://img-blog.csdnimg.cn/direct/22a22b8705fe4a738f1640dfa90bef46.png)
