img标签使用nth-of-type()无效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index-18w</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1.8, minimum-scale=1">
</head>
<style>
*{margin: 0; padding: 0; border: 0; }
.bj-18w{width: 1000px; height: 563px ; margin: 0 auto; background: url(images/18w-bj.jpg) no-repeat; background-size: 100% 100%;}
.bj-18w a img{width: 30px; position: absolute;}
.bj-18w a img:nth-of-type(1){margin-left: 45px; margin-top: 185px;}
.bj-18w a img:nth-of-type(2){margin-left: 160px; margin-top: 315px;}
.bj-18w a img:nth-of-type(3){margin-left: 230px; margin-top: 445px;}
.bj-18w a img:nth-of-type(4){margin-left: 310px; margin-top: 370px;}
.bj-18w a img:nth-of-type(5){margin-left: 470px; margin-top: 360px;}
</style>
<body>
<div>
<div class="bj-18w">
<a href="#" target="_blank"><img class="ql" src="images/ql.png" title="" alt="" /></a>
<a href="#" target="_blank"><img class="cz" src="images/cz.png" title="" alt="" /></a>
<a href="#" target="_blank"><img class="xj" src="images/xj.png" title="" alt="" /></a>
<a href="#" target="_blank"><img class="tc" src="images/tc.png" title="" alt="" /></a>
<a href="#" target="_blank"><img class="cf" src="images/cf.png" title="" alt="" /></a>
</div>
</div>
</body>
</html>每个img用同时用了第一个样式，我的理解是img几就用该样式，可惜理解错了。后来把nth-of-type()作用到a和.bj-18w中还是无效...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
楼上说得对，层级错了
img是a的第1个子元素，所以后面2，3，4，5无效
