（12）伪元素选择器
html代码: <div> 吟诗作对! </div> css写法 div{ background-color: pink; height: 100px; width: 200px; } div:after{ content: '?'; color:white; }（13）伪类选择器
hover和pointer html代码 <div class="c1"> </div> css写法 .c1{ background-color: red; height: 300px; width: 300px; } .c1:hover{ /*background-color: green;*/ background-image: url("111.png"); cursor: pointer; }（14）文字装饰
a{ text-decoration: none; 去除下划线 }（15）定位position
static 静态定位,也就是标签默认，html文档的默认效果 relative: 相对定位,按照自己原来的位置进行移动 absolute: 绝对定位,按照父级标签或者祖先辈儿标签设置了相对定位的标签位置进行移动,如果没有找到相对定位标签,会找到整个文档的位置进行移动 fixed: 固定定位, 按照浏览器窗口的位置进行移动 示例: html代码 <div class="cc"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div> css写法: body{ margin: 0; } .c1{ background-color: red; height: 100px; width:100px; } .c2{ background-color: green; height: 100px; width:100px; /*position: relative; !* 相对定位 *!*/ /*left:100px;*/ /*top:-100px;*/ /*bottom:*/ /*right:*/ position: absolute; top: 20px; left: 80px; } .c3{ background-color: purple; height: 100px; width:200px; } .cc{ margin-top: 200px; position: relative; } 固定定位示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .c1{ background-color: red; height: 1000px; width: 800px; } .c2{ background-color: green; height: 1000px; width: 800px; } .c3{ background-color: blue; height: 1000px; width: 800px; } .s1{ position: fixed; left: 40px; bottom: 20px; height: 40px; width: 60px; background-color: aqua; line-height: 40px; text-align: center; } .s1 a{ color:white; text-decoration: none; font-size: 12px; } </style> </head> <body> <div id="top">这是顶部</div> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <span class="s1"> <a href="">返回顶部</a> </span> </body> </html>（16）选择器优先级
html代码: <div class="c1"> 这是c1的直属文本 <div id="d1" class="c2"> <!--<span class="c3" id="d3" style="color:black;">--> <span class="c3 c4"> 这是c1的儿子c2标签的文本 </span> </div> </div> css代码 div{ color:red; } /* css属性有继承的概念 权重0*/ /* 标签(元素)选择器 权重1*/ /* 类选择器 权重10*/ /* id选择器 权重100*/ /* 内联样式 权重1000*/ <div style='color:red;'></div> /* color:green!important; 无敌! */ /* 如果优先级相同,按照后面的为准 */ 别忘了,class属性的值可以写多个 /*#d3{*/ /*color:yellow;*/ /*}*/ .c3{ color:blue; } /*span{*/ /*color:green!important;*/ /*}*/ .c4{ color:yellow; }