html - 将被父元素transform影响的子元素设为none,但不起作用,是什么原因,F12显示transform:none是正常的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
body{
background-color: #eee;
}
li{
list-style: none;
}
ul{
display: flex;
flex-direction: row;
}
ul li{
width: 234px;
height: 260px;
padding:20px 0;
margin:0 0 14px 14px;
background-color: #fff;
text-align: center;
text-overflow: ellipsis;
transition: 0.3s box-shadow,
0.3s transform;
}
ul li>a{
width: 160px;
height: 166px;
margin: 0 37px 18px 37px;
}
ul li>a img{
width: 160px;
height: 160px;
}
ul li h3{
font-size: 14px;
color: #212121;
font-weight: 400;
line-height: 21px;
height: 21px;
margin-bottom: 3px;
}
ul li h3 a{
color: #212121;
}
ul li .desc{
color: #b0b0b0;
height: 18px;
line-height: 18px;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 12px;
}
ul li .price{
color: #ff6709;
height: 21px;
line-height: 21px;
}
ul li:hover{
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 15px 30px;
transform: scale(1.01);
}
ul li a,ul li a img,ul li p{
box-shadow: none;
transform: none;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
</a>
<h3>
<a href="#">小米路由器3</a>
</h3>
<p class="desc">四天线设计,更安全稳定</p>
<P class = "price">149元</P>
</li>
<li>
<a href="#">
<img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
</a>
<h3>
<a href="#">小米路由器3</a>
</h3>
<p class="desc">四天线设计,更安全稳定</p>
<P class = "price">149元</P>
</li>
<li>
<a href="#">
<img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
</a>
<h3>
<a href="#">小米路由器3</a>
</h3>
<p class="desc">四天线设计,更安全稳定</p>
<P class = "price">149元</P>
</li>
<li class="no-mr">
<a href="#">
<img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
</a>
<h3>
<a href="#">小米路由器3</a>
</h3>
<p class="desc">四天线设计,更安全稳定</p>
<P class = "price">149元</P>
</li>
<li>
<a href="#">
<img src="http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg">
</a>
<h3>
<a href="#">小米路由器3</a>
</h3>
<p class="desc">四天线设计,更安全稳定</p>
<P class = "price">149元</P>
</li>
</ul>
</body>
</html>