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

【问题标题】：CSS inline style selector not working for iOS (safari, chrome)CSS 内联样式选择器不适用于 iOS（safari、chrome）
【发布时间】：2019-02-16 20:04:58
【问题描述】：

我有这样的事情：

HTML：

<body style="overflow: hidden;">

<div class="test"></div>

</body>

CSS/LESS：

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

当 body 具有内联样式溢出时：隐藏我正在尝试为测试 div 赋予一些样式。这适用于所有浏览器、所有 android 设备，但在 iOS（iphone x、8 等）上不起作用。没关系 Safari 或 iOS 上的 chrome 无法正常工作。

有什么建议吗？

【问题讨论】：

我不相信您上面显示的代码在 any 浏览器中有效。那不是有效的 CSS。你在使用预处理器吗？
对不起，我忘了添加它在 LESS 中。

标签： ios css google-chrome safari less

【解决方案1】：

我认为它必须完全匹配。不带星号 (*) 试试看。

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

样式需要完全匹配。

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

试试这个：

HTML

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

CSS

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

LESS/SASS

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

【讨论】：

我知道关于课程，但不幸的是我需要这样。我会尝试不使用星号 (*)。