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='https://www.haobala.com/wenda/5824.html#'><img src='http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg'> </a> <h3><a href='https://www.haobala.com/wenda/5824.html#'>小米路由器3</a> </h3> <p class='desc'>四天线设计,更安全稳定</p> <P class = 'price'>149元</P></li><li> <a href='https://www.haobala.com/wenda/5824.html#'><img src='http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg'> </a> <h3><a href='https://www.haobala.com/wenda/5824.html#'>小米路由器3</a> </h3> <p class='desc'>四天线设计,更安全稳定</p> <P class = 'price'>149元</P></li><li> <a href='https://www.haobala.com/wenda/5824.html#'><img src='http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg'> </a> <h3><a href='https://www.haobala.com/wenda/5824.html#'>小米路由器3</a> </h3> <p class='desc'>四天线设计,更安全稳定</p> <P class = 'price'>149元</P></li><li class='no-mr'> <a href='https://www.haobala.com/wenda/5824.html#'><img src='http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg'> </a> <h3><a href='https://www.haobala.com/wenda/5824.html#'>小米路由器3</a> </h3> <p class='desc'>四天线设计,更安全稳定</p> <P class = 'price'>149元</P></li><li> <a href='https://www.haobala.com/wenda/5824.html#'><img src='http://i3.mifile.cn/a4/T1rQAgB7Av1RXrhCrK.jpg'> </a> <h3><a href='https://www.haobala.com/wenda/5824.html#'>小米路由器3</a> </h3> <p class='desc'>四天线设计,更安全稳定</p> <P class = 'price'>149元</P></li> </ul></body></html>
问题解答
回答1:子元素被父元素包裹,父元素进行放大操作,父元素里面的子元素 作为一个整体一起放的
回答2:不用写浏览器私有前缀?