同级元素选择器和属性选择器（039文件图标的添加）

------------恢复内容开始------------

【注意】：

1.同级兄弟元素选择器：

nth-of-type(1)

nth-of-type(2)

nth-of-type(3)

nth-of-type(……)

排名1和4这两个li：

li:nth-of-type(1)
li:nth-of-type(4)

排名1、4、6这三个超链接

li:nth-of-type(1) a{……}
li:nth-of-type(4) a{……}
li:nth-of-type(6) a{……}

选中所有超链接

a:nth-of-type(1){……}

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文件图标的添加</title>
    </head>
    <style>
        ul li a {
            background-image: url(img/bg.png);
            background-repeat: no-repeat;
            padding-right:20px;
            background-position-x:right ;    
        }
        ul li:nth-of-type(1) a {background-position-y: 2px;}
        ul li:nth-of-type(2) a {background-position-y: -47px;}
        ul li:nth-of-type(3) a {background-position-y: -72px;}
        ul li:nth-of-type(4) a {background-position-y: -122px;}
        ul li:nth-of-type(5) a {background-position-y: -145px;}
        ul li:nth-of-type(6) a {background-position-y: -191px;}
        ul li:nth-of-type(7) a {background-position-y: -214px;}
        ul li:nth-of-type(8) a {background-position-y: -241px;}
        ul li:nth-of-type(9) a {background-position-y: -269px;}
        ul li:nth-of-type(10) a {background-position-y: -296px;}
    </style>
    <body>
        <ul>
            <li><a href="xxx.docx">World文档</a></li>
            <li><a href="xxx.pptx">powerpoint文档</a></li>
            <li><a href="xxx.xisx">Excel文档</a></li>
            <li><a href="xxx.PDF">pdf文档</a></li>
            <li><a href="xxx.html">HTMl网页 </a></li>
            <li><a href="xxx.swf">flash文档</a></li>
            <li><a href="xxx.zip">zit压缩文件</a></li>
            <li><a href="xxx.MP3">MP3音乐文件</a></li>
            <li><a href="xxx.exe">exe执行文件</a></li>
            <li><a href="xxx.txt">txt文本文档</a></li> 
        </ul>
    </body>
</html>

当将

<li><a href="xxx.docx">World文档</a></li>

添加到任意两行之间就会使得图标顺序会被打乱，原来的第三个变成第四个图，第四个变成第五个图 ，引出2属性选择器直接定位.docx属性

2.属性选择器

 li a[href$='.docx'] {background-position-y: 2px;}
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>文件图标的添加</title>
 6     </head>
 7     <style>
 8         ul li a {
 9             background-image: url(img/bg.png);
10             background-repeat: no-repeat;
11             padding-right:20px;
12             background-position-x:right ;    
13         }
14         ul li a[href$='.docx'] {background-position-y: 2px;}
15         ul li a[href$='.pptx'] {background-position-y: -47px;}
16         ul li a[href$='.xisx'] {background-position-y: -72px;}
17         ul li a[href$='.pdf'] {background-position-y: -122px;}
18         ul li a[href$='.html'] {background-position-y: -145px;}
19         ul li a[href$='.swf'] {background-position-y: -191px;}
20         ul li a[href$='.zip'] {background-position-y: -214px;}
21         ul li a[href$='.mp3'] {background-position-y: -241px;}
22         ul li a[href$='.exe'] {background-position-y: -269px;}
23         ul li a[href$='.txt'] {background-position-y: -296px;}
24         ul li a[href$='.jpg'] {background-position-y: -296px;}
25     </style>
26     <body>
27         <ul>
28             <li><a href="xxx.docx">World文档</a></li>
29             <li><a href="xxx.pptx">powerpoint文档</a></li>
30             <li><a href="xxx.xisx">Excel文档</a></li>
31             <li><a href="xxx.jpg">图片文档</a></li>
32             <li><a href="xxx.jpg">图片文档</a></li>
33             <li><a href="xxx.jpg">图片文档</a></li>                         
34             <li><a href="xxx.PDF">pdf文档</a></li>
35             <li><a href="xxx.html">HTMl网页 </a></li>
36             <li><a href="xxx.swf">flash文档</a></li>
37             <li><a href="xxx.zip">zit压缩文件</a></li>
38             <li><a href="xxx.MP3">MP3音乐文件</a></li>
39             <li><a href="xxx.exe">exe执行文件</a></li>
40             <li><a href="xxx.txt">txt文本文档</a></li> 
41         </ul>
42     </body>
43 </html>

 

 

------------恢复内容结束------------

posted @ 2021-10-19 19:10  会飞的猿人  阅读(68)  评论(0)    收藏  举报