CSS3 相鄰兄弟選擇器 hover

昔憶落落發表於2019-03-05

<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

<style type="text/css">
h1 + p {margin-top:50px;}
</style>複製程式碼
相鄰兄弟選擇器用 + 號連線
父級元素指向子集元素用>複製程式碼

<style>
    .father{
        color: yellow;    
}
    .father:hover>.son{
        color: red;
    }
    .father:hover+.fatherB{
        color: blue;
    }    
.father:hover+.fatherB>.sonB{
        color: green;
    }
</style>
<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
    <div class="fatherB">父親
        <div class="sonB">兒子</div>
    </div>
</body>複製程式碼

CSS3 相鄰兄弟選擇器  hover

CSS3 相鄰兄弟選擇器  hover


相關文章