CSS伪元素以及伪类和CSS特性
伪元素：可以理解为假标签。
有2个伪元素 （1）::before （2）::after
::before
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body::before{
content: "我是代表伪元素";
background-color: red;
width: 300px;
height: 300px;
border: 1px solid blue;
}
/*body标签样式
这个content代表body标签的内容*/
</style>
</head>
<body>
<div>
</div>
</body>
</html>
打开浏览器看效果
可以看到content就是body的内容，但是设置了宽高无效，可见伪元素是行内元素
总之就是不是不用Html标签做到Html标签的效果就称之为伪元素，把它转换为行内快元素就OK了
假display:inline-block
::after
同样一个意思，在标签内容之后。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body::after{
content: "我是代表伪元素";
background-color: red;
width: 300px;
height: 300px;
border: 1px solid blue;
}
/*body标签样式
这个content代表div标签的内容*/
</style>
</head>
<body>
<div>
Hello,
</div>
</body>
</html>
打开浏览器显示：
可以看到content的值在(独占一行)在div内容之后
接下来看这个如果：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body::before{
content: '\260E';/*icon*/
display: inline-block;
}
/*body标签样式
这个content代表div标签的内容*/
</style>
</head>
<body>
0754-88888888
</body>
</html>
效果
伪元素依附的同样且多个标签，会把伪元素的内容after或者before所依附的标签内容。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body p::before{
content: '\260E';
display: inline-block;
}
/*body标签样式
这个content代表div标签的内容*/
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>
注意：伪元素必须设置content属性，没设置伪元素不生效
伪元素属于行内元素
伪元素中不能再创建伪元素
一般是将伪元素要依附于某一个标签
CSS特性
（1）层叠性
之前说过，一个标签可以对应多个样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.one{
color: red;
}
.two{
color: blue;
}
</style>
</head>
<body>
<div class="one two">猜一下这个文字是什么颜色</div>
</body>
</html>
结果：蓝色
打开浏览器显示：
所以得出第一个结论:在同一个标签中，如果优先级相同，如果定义的样式发生冲突。那么最最后一次定义样式会将前面定义的样式（冲突的部分）覆盖掉。
（2）继承性（有嵌套关系的标签）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.one{
color:red;
}
</style>
</head>
<body>
<div class="one">
<span>
文字
</span>
</div>
</body>
</html>
浏览器结果
要改变span标签的 文字颜色，就需要选中span标签，但没有加span标签样式改变了字体颜色。因为嵌套在div中，div是他的父标签，所以：如果子元素默认没有样式，同时该元素又受父元素的影响
再追加样式
<style type="text/css">
.one{
color:red;
font: 20px;
text-align: center;
}
</style>
可以看到，color,font，text-align属性都可以被子元素继承。
下面有三个点需要注意：
（1）width和height不能被继承
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.one{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="one">
我是one
<div class="child">
我是child
</div>
</div>
</body>
</html>
浏览器效果
（2）a标签在默认情况下，不能受父元素的文字颜色影响
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.one{
color: red;
font-size: 50px;
font-weight: 600;
font-family: "宋体";
}
</style>
</head>
<body>
<div class="one">
<a href="javascript:void(0)">a标签默认情况下样式文字颜色不收父标签的影响</a>
</div>
</body>
</html>
浏览器效果
（3）标题标签在默认情况下，不能直接等于父元素设置的文字大小
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.one{
color: red;
font-size: 20px;
font-weight: 600;
font-family: "宋体";
}
</style>
</head>
<body>
<div class="one">
<h1>div中的h1标签</h1>
</div>
<h1>h1标签</h1>
</body>
</html>
上面忘了给div设置宽高了，才直观。
（3）优先级
之前说过样式的优先级：内联>内嵌>外部
现在是选择器的优先级：
先比较标签选择器和类选择器
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
color: red;
}
.p1{
color: green;
}
</style>
</head>
<body>
<p class="p1">Haydey</p>
</body>
</html>
类选择器与ID选择器：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
color: red;
}
.p1{
color: green;
}
#p2{
color: blue;
}
</style>
</head>
<body>
<p class="p1" id="p2">Haydey</p>
</body>
</html>
ID选择器>类选择器>标签选择器
接下来与行内样式比较
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
color: red;
}
.p1{
color: green;
}
#p2{
color: blue;
}
</style>
</head>
<body>
<p class="p1" id="p2" style="color: yellow">Haydey</p>
</body>
</html>
行内样式(内联)>ID选择器>类选择器>标签选择器
最后一个!important
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.p1{
color: green !important;
}
</style>
</head>
<body>
<p class="p1" style="color: yellow">Haydey</p>
</body>
</html>
最后得出结论
!important>行内样式(内联)>ID选择器>类选择器>标签选择器
伪类（也是选择器）
上面::是伪元素
：是伪类
第一个是:link
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a:link{
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<a href="javascript:void(0)">我是a标签</a>
</body>
</html>
：link修改a标签的默认样式
:visited
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a:link{
color: red;
text-decoration: none;
}
a:visited{
color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/" target="blank">我是a标签</a>
</body>
</html>
这个是点击a标签后的样式
一开始是红色，点击后是这样的,
变成了绿色
再次刷新：还是绿色，可以知道该标签会让浏览器缓存。而且这个标签只能设置与颜色相关的属性。
：hover
下面是京东的导航，当条鼠标移动红色箭头指向的地方就开始伪类的动作
看一下前程无忧的：前尘无忧
看一下代码
：hover不止用于a标签，不止改变字体颜色，还可以改大小等。。
a:active这个是点击a标签的文字，字体改变的情况，一般用的不多。
:focus 获取焦点：当input标签获取光标焦点的时候的样式，就是鼠标点击的时候
例如: input:focus
鼠标点击就变蓝色，在移吹来点击空白就变黄色了。
背景
背景颜色
background-color: 设置背景颜色
默认值： transparent (透明色)
背景图片
写法：background-image:url(这里是图片路径);
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
height: 400px;
width: 400px;
border: 1px solid red;
background-image:url(pika.jpg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-repeat: 设置背景图片的平铺方式
repeat | no-repeat | repeat-x| repeat-y
background-position: 设置背景图片位置
注意：
如果该属性设置一个值，那么另一个默认值代表center
如果设置具体数字，那么第一个值代表水平方向，第二值代表垂直方向
可以设置负数，正数代表沿着坐标轴正方向移动，负数沿着反方向移动
属性联写：
background-image:url(pika.jpg) no-repeat 30px 20px;
目标伪类
：target{属性: 值；}
注意：
目标伪类与锚链接配合使用
只有当被锚链接指向该标签的时候才会执行目标伪类中的css代码。
下面实验的代码，直接下拉
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#a:target{
color: red;
}
</style>
</head>
<body>
<div id="a">sdada</div>
<!--此处省略n行-->
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<a href="#a">dasd</a>
</body>
</html>
点击dsad就跳到id=a的地方，字体颜色变红，在此刷新，字体还是红的，可以说还是有浏览器缓存。
