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>

怪我咯2782 Tage vor717

html - 将被父元素transform影响的子元素设为none，但不起作用，是什么原因，F12显示transform：none是正常的。

Antworte allen(2)Ich werde antworten