一、基本选择器
基本选择器有四种：标签选择器、ID选择器、类选择器、通配符选择器。
1.标签选择器：根据标签的名称设置对应的样式；
2.ID选择器：通过获取标签里面的ID属性去设置对应的样式，设置的时候通过 “#”+id的值；
3.类选择器：通过获取标签里面的class属性去设置对应的样式，设置的时候.+class的属性值；
4.通配符选择器：能够给每一个标签加上对应的样式,通过*设置对应的样式。
优先级：ID选择器>类选择器>标签选择器>通配符选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器</title>
<style>
/*标签选择器*/
div{
width: 200px;
height: 200px;
border: 1px solid black;
color: aquamarine;
}
/*ID选择器*/
#one{
color: blueviolet;
}
/*类选择器*/
.box{
color: blue;
}
/*通配符选择器*/
*{
color: darkgreen;
}
</style>
</head>
<body>
<div>标签选择器效果</div>
<p id="one">ID选择器效果</p>
<div class="box">这是类选择器效果</div>
<hr>
<ul>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
</ul>
</body>
</html>
二、包含选择器
包含选择器有三种：子代选择器、后代选择器、分组选择器。
子代选择器：获取的是某个标签的第一级子标签；
后代选择器：获取的是某个标签的所有子标签；
分组选择器：也叫做逗号选择器，也可以设定多个选择器，用逗号进行分割。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>包含选择器</title>
<style>
/*子代选择器*/
div.list > ul{
border: 1px solid red;
}
/*后代选择器*/
.list li{
border: 1px solid green;
}
/*分组选择器*/
#one,.box,h1{
color: blueviolet;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p id="one">ID选择器效果</p>
<div class="box">这是类选择器效果</div>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
</ul>
<li>这是列表8</li>
<li>这是列表9</li>
<li>这是列表10</li>
</div>
</body>
</html>
三、属性选择器
属性选择器写法：标签名[属性] { 样式 }
只要有 type 属性的 input 标签样式都会发生变化，也可以给属性加上属性值来限制条件 。
input[type=”text”] —- 只有 type 属性的属性值为 text 的 input 标签样式才会生效。
*= 代表只要满足条件的都生效，只要 type 这个属性中包含=后面的值就会生效。
^= 代表属性中的值以xxx开始，只要 type 这个属性中包含=后面的值就会生效。
$= 代表属性里面包含以xxx结尾，只要 type 这个属性中包含=后面的值就会生效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/*选中某个标签中存在的某个值*/
.container[class]{
color: red;
}
div[title]{
color: blue;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性里面包含某个值*/
input[type *="x"]{
background: violet;
}
/*属性里面包含以xxx开始*/
input[type ^="e"]{
background: green;
}
/*属性里面包含以xxx结尾*/
input[type $="rl"]{
background: orange;
}
/*表示下一个标签*/
.msg + p{
color: rgb(220, 255, 196);
}
/*属性等于某个值*/
[title="这是一个标题"]{
color: aquamarine;
}
</style>
</head>
<body>
<div class="container">这是一个div容器</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="王五">
<input type="url" value="李四">
<hr>
<div class="msg">我喜欢吃好吃的</div>
<p class="msg2">这是一个段落</p>
</body>
</html>
四、伪类选择器
伪类选择器：同一个标签在不同的状态下，有不同的样式
伪类:同一个标签，在不同的状态下，有不同的样式
伪类通过冒号表示
最早的时候主要是用来与渲染a标签不同的状态下不同的样式
1.超链接点击之前————————–:link
2.超链接被访问之后———————–:visited
3.鼠标放在超链接上的时候(悬停)——:hover
4.超链接激活的时候(鼠标点击便签但是不松手的时候):active
注意：对于a标签的四种状态顺序是一定的（a：link a：visited a：hover a：active）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/*超链接点击之前的颜色是红色*/
a:link{
color: red;
}
/*超链接点击之后的颜色是橙色*/
a:visited{
color: orange;
}
/*鼠标悬停的时候的颜色是绿色*/
a:hover{
color: green;
}
/*超链接被激活的时候的颜色是蓝色*/
a:active{
color: blue;
}
div:hover{
color: blueviolet;
border: 1px solid black
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">点击</a>
<div>这是一个div标签</div>
</body>
</html>
五、伪元素选择器
伪元素选择器
：before————css2
：after————css2
：：before————css3
：：after————css3
注意：使用before和after的时候一定给要写上content属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
p{
color: red;
font-size: 20px;
}
p::before{
content:"张三说";
color: blueviolet;
}
p::after{
content:"对不对？";
color: goldenrod;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>