Question

我在:not(s)选择器中使用高级否定伪类选择器时遇到问题（ !!在谷歌Chrome浏览器中!! ）。

我有这个HTML标记：

<div class="body">
    <div class="container">
        <div class="element-1"></div>
        <div class="element-2"></div>
        <div class="element-1 element-offset-2"></div>
        <div class="element-3"></div>
    </div>
</div>

我使用以下CSS在每个margin-left元素上都有一个element-（第一个除外）：

div[class*="element-"] + div[class*="element-"] {
    margin-left: 1%;
}

有关工作示例，请参阅https://jsfiddle.net/em6hefqj/2/。

<小时/> 但问题是，我不希望类element-offset-n的元素具有margin-left。我使用以下CSS：

div[class*="element-"] + div[class*="element-"]:not([class*="element-offset-"]) {
    margin-left: 1%;
}

有关工作示例，请参阅https://jsfiddle.net/em6hefqj/。

<小时/> 如上所示，我使用[class*="element-offset-"]，但我必须使用div[class*="element-offset-"]。我不能使用没有元素前缀的高级选择器，因为它会导致同一页面上的不同元素之间发生冲突（div，p等等。这在Safari和Firefox中有效（我已经测试过），但它在Google Chrome中不起作用请参阅https://jsfiddle.net/em6hefqj/1/了解（在Chrome中）无效的示例。

以下是一些供参考的图片：

Chrome（在选择器前没有div的情况下工作）：

Safari（在选择器前使用div）：

Chrome（不适用于选择器前面的div）：

<小时/> 我希望你能帮助我，我愿意接受建议。这可能是一个错误，如果是这样，我会向Chrome开发团队报告。

Answer 1

我认为Chrome在这里是正确的（至少按照现行标准）

文件：

6.6.7。否定伪类

否定伪类，不是（X），是一种功能符号   一个简单的选择器（不包括否定伪类本身）作为参数。它表示一个未由其表示的元素   参数。

w3c doc

Answer 2

:not()只根据规范采用“简单”选择器。

你可以使用经典的CSS方法给出两个规则，第二个覆盖第一个规则（如果适用）：

div[class*="element-"] + div[class*="element-"] {
  margin-left: 1%;
}

div[class*="element-"] + div[class*="element-"][class*="element-offset-"]) {
  margin-left: 0;
}

Answer 3

我认为这是一个跨浏览器兼容性问题。这有助于https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

带元素前缀的高级元素选择器在Chrome中不起作用

3 个答案: