HTML[2種特殊選擇器]_偽類選擇器&屬性選擇器
阿新 • • 發佈：2021-01-21
本文介紹兩種特殊的選擇器
1.偽類選擇器
2.屬性選擇器
1.偽類選擇器
...: nth-of -type (x)
x為同類型兄弟元素中的排名
例如：
<body> <ul> <li><a href="xxx.doc">word文件</a></li> <li><a href="xxx.ppt">ppt文件</a></li> <li><a href="xxx.xls">Excel文件</a></li> <li><a href="xxx.txt">txt文件</a></li> <li><a href="xxx.rar">壓縮檔案</a></li> </ul> </body> // <style> ul li:nth-of-type(1) a {background-position-y: 0px;} ul li:nth-of-type(2) a {background-position-y: -46px;} ul li:nth-of-type(3) a {background-position-y: -92px;} ul li:nth-of-type(4) a {background-position-y: -138px;} ul li:nth-of-type(5) a {background-position-y: -184px;} </style>
2.屬性選擇器:
(1) ...[ attr = val ] 表示屬性等於val的元素
(2)...[ href $= val ] 表示屬性結尾等於val的元素
(3)...[ class ^= 'tap' ] 表示屬性開頭等於val的元素
例如下面程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul li a{ background-image: url(1.png); background-repeat: no-repeat; padding-right: 80px; background-position-x: right; font-size: 40px; line-height: 60px; } ul li a[href$='.doc']{background-position-y: 0px;} ul li a[href$='.ppt']{background-position-y: -50px;} ul li a[href$='.xls']{background-position-y: -100px;} ul li a[href$='.txt']{background-position-y: -150px;} ul li a[href$='.rar']{background-position-y: -200px;} </style> </head> <body> <ul> <li><a href="xxx.doc">word文件</a></li> <li><a href="xxx.ppt">ppt文件</a></li> <li><a href="xxx.xls">Excel文件</a></li> <li><a href="xxx.txt">txt文件</a></li> <li><a href="xxx.rar">壓縮檔案</a></li> </ul> </body> </html>
程式碼中的ul li a[href$='.doc']{background-position-y: 0px;}
代表同級兄弟元素中href以.doc結尾的選擇器