伪元素：可以理解为假标签。
有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的地方，字体颜色变红，在此刷新，字体还是红的，可以说还是有浏览器缓存。
