<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無(wú)標(biāo)題文檔</title>
<style?type="text/css">
????body,p{
margin:0;
padding:0;
}
p{
background-color:red;
width:200px;
height:200px;
position:absolute;
transition:left?1s;
}
p:first-child{
opacity:1;
left:0;
}
p:nth-child(2){
opacity:0.7;
left:200px;
}
p:nth-child(3){
opacity:0.5;
left:400px;
}
p:nth-child(4){
opacity:0.3;
left:600px;
}
p:first-child:hover~p{
left:20px;
}
p:nth-child(2):hover+p:nth-child(n+2){
left:220px;
}
</style>
</head>
<body>
?????<div?class="wrap">
???????????<p></p>
???????????<p></p>
???????????<p></p>?
???????????<p></p>
?????</div>
</body>
</html>
css選擇器，選中第二個(gè)p,實(shí)現(xiàn)第三個(gè)和第四個(gè)p的效果，
qq_小盛開(kāi)_0
2016-11-03 22:22:10
