属性选择器
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">viplabel> 44 <label for="vip1">vip1label> 45 <label for="7vip2">vip2label> 46 <label for="vip3">vip3label> 47 <label for="user1">用户名1label> 48 <label for="user2">用户名2label> 49 <label for="user3">用户名3label> 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>