0 文本样式的4种导入方式：
https://www.cnblogs.com/linhaifeng/articles/9004021.html#_label3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 嵌入式-->
<style>
p{
color: red;
font-size: 30px;
}
</style>
<!-- 导入式：不是所有浏览器都支持-->
<style>
@import url(a.css);
</style>
<!-- 外联式-->
<link rel="stylesheet" href="a.css">
</head>
<body>
<p>
嵌入式样式
</p>
<p>
外链式
</p>
<!--行内式（内联式）-->
<p style="color: #5a42ff; font-size: 30px">
你好！
</p>
<p id="p2">p2</p>
<p class="p3">p3</p>
</body>
</html>
https://www.cnblogs.com/linhaifeng/articles/9005117.html
1 基本选择器和组合选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*=======基本选择器=======*/
/*标签选择器*/
p{
color: lightgrey;
}
/*id选择器*/
#p2{
color: red;
}
/*类选择器*/
.p1{
color: red;
}
.p2{
font-size: 50px;
}
.p3{
text-decoration: underline;
}
/*=======组合选择器=====*/
/*后代选择器：后代中的子子孙孙*/
div p{
color: yellowgreen;
}
/*儿子选择器：只要儿子不要孙子*/
div>p{
color: yellowgreen;
}
/*毗邻选择器：相邻的兄弟，不能被隔开*/
div+p{
color: yellowgreen;
}
/*兄弟选择器：隔开也可以*/
div～p{
color: yellowgreen;
}
/*交集选择器，没有连接符号，实际上和.part1效果一样*/
p.part1{
color: lightgrey;
}
/*并集选择器，用逗号隔开*/
h3,h4{
color: green;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="p2">我的id是p2</p>
<p class="p1 p3">我属于类p1p3</p>
<p class="p2 p3">我属于类p2p3</p>
<p class="p1 p2">我属于类p1p2</p>
<p></p>
<ul>
<li>
<p>嘻嘻</p>
</li>
<li>
<p>嘻嘻</p>
</li>
<li>
<p>嘻嘻</p>
</li>
</ul>
<p class="part1">我是p的part1</p>
<h3>我是h3！</h3>
<h4>我是h4！</h4>
</body>
</html>
2 序列选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*同级别的第一个，这个类型是p*/
p:first-child{
color:red;
}
/*同级别的最后一个，这个类型是p*/
p:last-child{
color: green;
}
/*同级别的第n个，这个类型是p*/
p:nth-child(3){
color: blue;
}
/*同类型的第一个*/
h1:first-of-type{
color: #5a42ff;
}
h1:last-of-type{
color: aquamarine;
}
/*只有一个孩子，孩子类型是p*/
p:only-child{
color: gold;
}
/*同级别只有一个类型p*/
p:only-of-type{
color: gold;
}
</style>
</head>
<body>
<p>我是第1行p</p>
<h1>我是第1行h1</h1>
<p>我是第2行p</p>
<h1>我是第二行h2</h1>
<p>我是第3行p</p>
<p>我是第4行p</p>
<p>我是第5行p</p>
<p>我是第6行p</p>
</body>
</html>
3 属性选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[id]{
color: gold;
}
[class*="part"] {
color: #5a42ff;
}
a[href^="127"]{
color: aquamarine;
}
a[href$=".com"]{
color: red;
}
input[type='text']{
color: rebeccapurple;
background-color: antiquewhite;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="127.0.0.1">127xxxx</a>
<a href="http://www.b.com">http://www.baidu.com</a>
<a href="https://www.bdu.com">https://www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
<input type="text">
</body>
</html>
4 伪类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*初始状态*/
a:link {
color: red;
}
/*悬浮状态*/
a:hover{
color: green;
}
/*按住状态*/
a:active{
color: violet;
}
/*浏览过的状态*/
a:visited{
color: rebeccapurple;
}
input:focus{
font;
background-color: violet;
outline: none;
}
</style>
</head>
<body>
<a href="www.sss.com">www.sss.com</a>
<br>
<input type="text">
</body>
</html>
5 伪元素选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter{
font-size: 50px;
}
/*在前面加东西*/
p:before{
content: ">>>";
color: violet;
}
/*在后面面加东西*/
p:after{
content: "<<<";
color: darkcyan;
}
</style>
</head>
<body>
<p>
需要你，我是一只鱼
</p>
</body>
</html>