1.标记选择器(如：body,div,p,ul,li)
2.id选择器(如：id=“name”,id=“name_txt”)
3.类选择器(如：id=“name”,id=“name_txt”)
4.后代选择器(如：#head .nav ul li 从父集到子孙集的选择器)
5.子元素选择器(如：div>p ,带大于号>)
6.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
看完了基本的css选择器类型后，我们接着来看一下css优先级的概念。
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，用到谁的值谁的优先级就高。
我们来看一下css选择器优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是 行内选择符，则加1、0、0、0
若是 ID选择符，则加0、1、0、0
若是 类选择符/伪类选择符，则分别加0、0、1、0
若是 元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
看完了上述内容，那我们就来看看css选择器优先级的具体排序。
css选择器优先级最高到最低顺序为：
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.子选择器(ul <li)
5.后代选择器(li a)
6.伪类选择(a:hover,li:nth-child)
最后，需要注意的是：
!important的优先级是最高的，但出现冲突时则需比较”四位数“
优先级相同时，则采用就近原则，选择最后出现的样式
继承得来的属性，其优先级最低。
首先我们来介绍一下@page的相关用法：
@page用于设置页面容器的版式，方向，边空等。
语法：
@page <label><pseudo-classes>{ sRules }
取值：
<label>：
页面标识符
<pseudo-class>：
打印伪类:first, :left, :right
在Firefox,Safari,Internet Explorer,Google Chrome,Opera等浏览器中，默认的页眉是网页title，页脚是第几页/共几页. 只有Microsoft Edge没有默认的页眉，页脚，为了样式统一，我们可以在打印时关闭浏览器自带页眉页脚，统一使用CSS定义的页眉页脚
请点击输入图片描述
接下来，我们在网页中定义专用于打印的CSS样式，在style标签中使用media="print"进行定义，如下
<style type="text/css" media="print">
接下来为每一页设置页边距
@page {margin-left: 50pxmargin-top: 100px}
如果有封面，可以用以下样式单独定义
@page :first {
margin-left: 50%
margin-top: 50%
}
具体样式可根据自己需要写入样式内
接下来再定义几个样式用于分页及页眉页脚
这是分页标记的样式
.geovindu{
page-break-after: always
}
这是页眉的样式
.pageheader {
margin-top: 10px
font-size:12pt
}
具体样式可根据自己需要写入样式内
这是页眉的样式
.pagefooter{
margin-top: 10px
font-size:10pt
}
具体样式可根据自己需要写入样式内
接下来在body标签内输入相关html标签并应用我们的样式
<body>
<script type="text/javascript">
document.querySelector("button").onclick = function () {
window.print()
}
</script>
<div id="geovindu" class="geovindu">
<div class="pageheader">页眉：打印测试</div>
<div class="conent">
封面内容
</div>
<div class="pagefooter">页脚：第1页/共2页</div>
</div>
<div id="geovindu" class="geovindu">
<div class="pageheader">页眉：打印测试</div>
<div class="conent">
第二页内容
</div>
<div class="pagefooter">页脚：第2页/共2页</div>
</div>
<button>打印按钮</button>
</body>
以上仅做为参考，可以根据自己的需要灵活使用
最后贴上完整html，大家可以复制到文本编辑中保存网页来测试
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打印测试页</title>
<style type="text/css" media="screen">
.pageheader ,.pagefooter {display:none}
</style>
<style type="text/css" media="print">
/*每一页 如果没有另外自定义的话 */
@page {margin-left: 50pxmargin-top: 100px}
/*第一页*/
@page :first {
margin-left: 50%
margin-top: 50%
}
/*分页标记*/
.geovindu{
page-break-after: always
}
.pageheader {
margin-top: 10px
font-size:12pt
}
.pagefooter{
margin-top: 10px
font-size:10pt
}
</style>
</head>
<body>
<script type="text/javascript">
document.querySelector("button").onclick = function () {
window.print()
}
</script>
<div id="geovindu" class="geovindu">
<div class="pageheader">页眉：打印测试</div>
<div class="conent">
封面内容
</div>
<div class="pagefooter">页脚：第1页/共2页</div>
</div>
<div id="geovindu" class="geovindu">
<div class="pageheader">页眉：打印测试</div>
<div class="conent">
第二页内容
</div>
<div class="pagefooter">页脚：第2页/共2页</div>
</div>
<button>打印按钮</button>
</body>
</html>
