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中还是无效...

阅读 2.3k
3 个回答
.bj-18w a:nth-of-type(1) img{margin-left: 45px; margin-top: 185px;}
.bj-18w a:nth-of-type(2) img{margin-left: 160px; margin-top: 315px;}
.bj-18w a:nth-of-type(3) img{margin-left: 230px; margin-top: 445px;}
.bj-18w a:nth-of-type(4) img{margin-left: 310px; margin-top: 370px;}
.bj-18w a:nth-of-type(5) img{margin-left: 470px; margin-top: 360px;}

楼上说得对,层级错了

img是a的第1个子元素,所以后面2,3,4,5无效
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题