HTML[2种特殊选择器]_伪类选择器&属性选择器

本文介绍两种特殊的选择器
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结尾的选择器

posted @ 2021-01-21 15:37  橙事千千  阅读(66)  评论(0)    收藏  举报