CSS内联样式选择器不适用于iOS（safari、chrome）_Ios_Css_Google Chrome_Safari_Less

CSS内联样式选择器不适用于iOS（safari、chrome）

ios css google-chrome safari less

CSS内联样式选择器不适用于iOS（safari、chrome）,ios,css,google-chrome,safari,less,Ios,Css,Google Chrome,Safari,Less,我有这样的想法： HTML: 当body有内联样式溢出：hidden时，我尝试给测试div一些样式。这在所有浏览器、所有安卓设备上都有效，但在iOS iphone x、8等上除外。它不起作用了。iOS上的safari或chrome不起作用并不重要有什么建议吗？我认为它必须完全匹配。不带asterix*试试看 body[style="overflow: hidden;"] { .test {z-index: 1;} } 风格必须完全匹配但是，我建议您为此使用类，上面的代码非常难看试

我有这样的想法：

HTML:

当body有内联样式溢出：hidden时，我尝试给测试div一些样式。这在所有浏览器、所有安卓设备上都有效，但在iOS iphone x、8等上除外。它不起作用了。iOS上的safari或chrome不起作用并不重要

有什么建议吗？

我认为它必须完全匹配。不带asterix*试试看

body[style="overflow: hidden;"] {
    .test {z-index: 1;}
}

风格必须完全匹配

但是，我建议您为此使用类，上面的代码非常难看

试试这个：

HTML

减/减

.overflow-hidden {
    .test {
        z-index: 1;
    }
}

我不相信上面显示的代码在任何浏览器中都能工作。这是无效的CSS。你在使用预处理器吗？很抱歉，我忘了添加它。我知道关于类，但不幸的是，我需要这样的预处理器。我将尝试不使用asterix*。

body[style="overflow: hidden;"] {
    .test {z-index: 1;}
}

<body class="overflow-hidden">
    <div class="test"></div>  
</body>

.overflow-hidden .test {
    z-index: 1;
}

.overflow-hidden {
    .test {
        z-index: 1;
    }
}