属性选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>属性选择器</title> 6 <style> 7 /*属性匹配*/ 8 label[for] { 9 color:deeppink; 10 text-decoration:underline; 11 } 12 /*属性名匹配*/ 13 label[for='pwd'] { 14 color:deeppink; 15 text-decoration:none; 16 } 17 /*以什么结尾匹配*/ 18 label[for$='3'] { 19 color:khaki; 20 font-size:50px; 21 } 22 /*以什么开头匹配*/ 23 label[for^='7'] { 24 color:gold; 25 font-size:50px; 26 } 27 /*属性名中有什么匹配*/ 28 label[for*='ser'] { 29 color:firebrick; 30 } 31 </style> 32 </head> 33 <body> 34 <!--属性选择器在表单控件中使用比较频繁--> 35 <div> 36 37 <div class="box"> 38 39 <form action=""> 40 <label for="user">用户名</label> 41 <input type="text" id="user"> 42 <label for="pwd">密码：</label> 43 <label for="vip">vip</label> 44 <label for="vip1">vip1</label> 45 <label for="7vip2">vip2</label> 46 <label for="vip3">vip3</label> 47 <label for="user1">用户名1</label> 48 <label for="user2">用户名2</label> 49 <label for="user3">用户名3</label> 50 </form> 51 </div> 52 </div> 53 </body> 54 </html>
伪类选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪类选择器</title> 6 <style> 7 8 /*没有被访问的标签样式*/ 9 .box ul li.item1 a:link { 10 color:gray; 11 } 12 /*访问过的标签样式*/ 13 .box ul li.item2 a:visited { 14 color:palegoldenrod; 15 } 16 /*鼠标悬停时的标签样式*/ 17 .box ul li.item3 a:hover { 18 color:red; 19 } 20 /*鼠标点住时的样式*/ 21 .box ul li.item4 a:active { 22 color:teal; 23 } 24 /*选中第一个元素*/ 25 div ul li:first-child { 26 font-size:30px; 27 } 28 /*选中最后一个元素*/ 29 div ul li:last-child { 30 font-size:10px; 31 } 32 /*选中括号里的第几个元素 数值是n的话表示选中所有，n是从0开始的，0的时候表示没有选中 2n选中偶数 2n-1选奇数*/ 33 div ul li:nth-child(3) { 34 font-size:40px; 35 } 36 /*隔行换色 n前面的数值表示隔几减一行换色*/ 37 div ul li:nth-child(4n+1) { 38 font-size:40px; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="box"> 44 <ul> 45 <li class="item1"> 46 1 47 <a href="#">张三</a> 48 </li> 49 <li class="item2"> 50 2 51 <a href="#">李四</a> 52 </li> 53 <li class="item3"> 54 3 55 <a href="#">王八</a> 56 </li> 57 <li class="item4"> 58 4 59 <a href="#">王八单</a> 60 </li> 61 </ul> 62 </div> 63 </body> 64 </html>
伪元素选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪元素选择器</title> 6 <style> 7 /*设置首字符的样式*/ 8 p:first-letter { 9 color: coral; 10 font-size:50px; 11 } 12 /*在前面加内容(使用不是很频繁) 对应的还有after(使用非常频繁) 使用此伪元素选择器一定要结合content属性*/ 13 p:before { 14 content:'阿尔托莉雅'; 15 } 16 </style> 17 </head> 18 <body> 19 20 <p> 21 我是一个段落 22 </p> 23 </body> 24 </html>