Question

当所有图像都是div形状的直接后代时，我不确定为什么选择最后一个图像6.png。感谢您的帮助，非常感谢。根据我的理解，它应该选择所有div，因为它们都是div #shape的直接后代。

<!DOCTYPE html>
<html>
<head>
    <title>3D image</title>
    <style>
    body,html{
        width:100%; 
        height:100%;
        overflow:hidden;
    }

    body{
        background:-webkit-gradient(radial,800 
               64,950, 500, 400, 40, from(#1F1F1F),  to(#FFFFFF));
    }

    #container{
        width:100%;
    }

    #shape{
        position:relative;
        top:160px;
        margin: 0 auto;
        width:200px;
        height:200px;
    }

    #shape > div{
        position:absolute;
        height:200px;
        width:200px;
        border:1px solid #e3e3e3;
        -webkit-border-radius:10px;
    }
</style>
</head>
<body>
<div id="container">
    <div id="shape">
        <div class="one"><a href="http://www.bbc.co.uk/persian"><img src="images/2.png"></a></div>
        <div class="two"><a href="http://www.aljazeera.com"><img src="images/3.png"></a></div>
        <div class="three"><a href="http://www.bbc.co.uk/news"><img src="images/4.png"></a></div>
        <div class="four"><a href="http://www.yahoo.com"><img src="images/1.png"></a></div>
        <div class="five"><a href="http://www.html5nurse.com"><img  src="images/5.png"></a></div>
        <div class="six"><a href="http://www.cnn.com"><img src="images/6.png"></a></div>
    </div>
</div>
</body>
</html>

Answer 1

所有这些都被选中了。

它们彼此重叠，因为它们都具有相同的位置。

Answer 2

替换

#shape > div{
    position:absolute;
    height:200px;
    width:200px;
    border:1px solid #e3e3e3;
    -webkit-border-radius:10px;
}

代表

#shape > div{
    position:relative;
    float: left;
    height:200px;
    width:200px;
    border:1px solid #e3e3e3;
    -webkit-border-radius:10px;
}

你应该看到差异。

令人困惑的CSS，任何人都可以解释

2 个答案: