文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS属性选择器在Chrome中不工作

问CSS属性选择器在Chrome中不工作
EN

Stack Overflow用户

提问于 2022-07-19 11:35:06

回答 4查看 774关注 0票数 4

从上周开始，我们在谷歌Chrome当前版本的网站上出现了CSS问题。该页面在Edge和Firefox上正常工作。

奇怪的是，它似乎只发生在某些机器或可能的Chrome实例上。设置是否被重置和刷新或隐名模式不能解决它并不重要。

这似乎与CSS中的属性选择器有关。我们发现的最小的可复制的例子就是奇怪的。它包含许多不相关的样式，删除(看似)不相关的样式使页面工作。

当它工作时，下面的页面上的文本是红色的。当它不工作时，文本是黑色的。

屏幕截图，包括devtools中的样式：(上面是Chrome，下是边缘)

<!DOCTYPE html>
<html>
<head>
<style>
custom-element .custom-form-control.miss-value:focus + label[data-placeholder]:before,
custom-element .custom-form-control.has-value + label[data-placeholder]:before {
}
custom-element .custom-form-control.has-value.has-data-placeholder:focus + label[data-placeholder],
custom-element .custom-form-control.miss-value.has-data-placeholder:focus + label[data-placeholder] {
}
custom-element .custom-form-control.has-value + label[data-placeholder],
custom-element .custom-form-control.miss-value + label[data-placeholder] {
}
custom-element .custom-form-control.has-value + label[data-placeholder][data-alt]:before,
custom-element .custom-form-control.miss-value + label[data-placeholder][data-alt]:before {
  content: attr(data-alt);
}
custom-element .custom-form-control.has-value + label[data-placeholder]:before,
custom-element .custom-form-control.miss-value + label[data-placeholder]:before {
    color: red;
}
custom-element .custom-form-control.miss-value.has-data-placeholder + label[data-placeholder] {
}
custom-element .custom-form-control.has-value {
}
custom-element .custom-form-control.has-value:hover {
}
custom-element .custom-form-control.has-value label[data-placeholder] {
}
custom-element .custom-form-control:focus + label[data-placeholder]:before,
custom-element .custom-form-control.has-value.is-active + label[data-placeholder]:before,
custom-element .custom-form-control.has-value:focus:hover + label[data-placeholder]:before,
custom-element .custom-form-control.has-value:hover + label[data-placeholder]:before,
custom-element .custom-form-control[type='text'].has-value:hover + label[data-placeholder]:before,
custom-element .custom-form-control[type='text'].has-value:focus + label[data-placeholder]:before,
custom-element .custom-form-control.has-value.custom-bordered:focus + label[data-placeholder]:before,
custom-element .custom-form-control.has-value.custom-bordered:hover + label[data-placeholder]:before {
}
my-unrelated-element .custom-form-control.miss-value:focus + label[data-placeholder]:before,
my-unrelated-element .custom-form-control.has-value + label[data-placeholder]:before {
}
my-unrelated-element .custom-form-control.has-value.has-data-placeholder:focus + label[data-placeholder],
my-unrelated-element .custom-form-control.miss-value.has-data-placeholder:focus + label[data-placeholder] {
}
my-unrelated-element .custom-form-control.has-value + label[data-placeholder],
my-unrelated-element .custom-form-control.miss-value + label[data-placeholder] {
}
my-unrelated-element .custom-form-control.has-value + label[data-placeholder]:before,
my-unrelated-element .custom-form-control.miss-value + label[data-placeholder]:before {
}
my-unrelated-element .custom-form-control.miss-value.has-data-placeholder + label[data-placeholder] {
}
my-unrelated-element .custom-form-control.has-value label[data-placeholder] {
}

some-unrelated-element .custom-form-control:focus + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value.is-active + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value:focus:hover + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value:hover + label[data-placeholder]:before,
some-unrelated-element .custom-form-control[type='text'].has-value:hover + label[data-placeholder]:before,
some-unrelated-element .custom-form-control[type='text'].has-value:focus + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value.custom-bordered:focus + label[data-placeholder]:before,
some-unrelated-element .custom-form-control.has-value.custom-bordered:hover + label[data-placeholder]:before {
}

some-unrelated-element input.miss-value:focus + label[data-placeholder]:before,
some-unrelated-element input.has-value + label[data-placeholder]:before {
}

some-unrelated-element input.has-value.has-data-placeholder:focus + label[data-placeholder],
some-unrelated-element input.miss-value.has-data-placeholder:focus + label[data-placeholder] {
}

some-unrelated-element input.has-value + label[data-placeholder],
some-unrelated-element input.miss-value + label[data-placeholder] {
}
unrelated-element input:focus + label[data-placeholder]:before,
unrelated-element input.has-value.is-active + label[data-placeholder]:before,
unrelated-element input.has-value:focus:hover + label[data-placeholder]:before,
unrelated-element input.has-value:hover + label[data-placeholder]:before,
unrelated-element input[type='text'].has-value:hover + label[data-placeholder]:before,
unrelated-element input[type='text'].has-value:focus + label[data-placeholder]:before,
unrelated-element input.has-value:focus + label[data-placeholder]:before,
unrelated-element input.has-value:hover + label[data-placeholder]:before {
}

</style>
</head>
<body>
<custom-element>
    <div class="form-group">
        <input type="text" class="custom-form-control has-value" id="0ad40e91-f280-42d2-b0c5-2b38dd433e80">
        <label for="0ad40e91-f280-42d2-b0c5-2b38dd433e80" data-placeholder="This text should be red" data-alt="This text should be red"></label>
    </div>
</custom-element>
</html>

google-chrome

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2022-07-20 10:30:15

我们的客户在升级到Chrome 103后也有类似的(间歇性)问题。

经过大量的调试和拔毛，我发现如果有50条(或更多)没有任何值的[data-attribute]规则(而不是[data-attribute="foo"]正常工作)，Chrome就会抛弃[data-attribute="foo"]样式。

如果在此钢笔上看不到黄色背景，请尝试从CSS :-)中删除任何[data-children]行。

我通过添加无效的CSS规则并在选择器中指定数据属性值来解决这个问题：

[data-attribute="foo"] {
   bar: baz;
}

值foo需要至少存在于HTML中的一个位置。

票数 5

Stack Overflow用户

发布于 2022-07-19 23:05:26

没有答案，但我也遇到了这个问题--也是上周开始的。我可以用Chrome 103.0.5060.134在一台机器上复制，但不能在运行相同版本的第二台机器上复制。我还可以在Chrome Beta (104.0.5112.48)和铬金丝雀(105.0.5190.0)中繁殖。

票数 1

Stack Overflow用户

发布于 2022-07-20 07:50:28

回答我自己的问题。经过多次的尝试和错误..。

最终为我解决的是删除%localappdata%\Google\Chrome\User数据中的“本地状态”文件。

这是一个json文件，在将数据与“干净”文件进行比较之后，我一次更改了一个属性。

对我来说，引起问题的似乎是"low_entropy_source3“中的"user_experience_metrics”属性。该页面与预期的“干净”值一起工作，而对旧值则不起作用。

为什么它解决了这个问题，为什么Chrome的行为是基于这个数字，我不知道。

编辑:解决方案被证明是暂时的。幸运的是，with可以根据Luka的建议找到一个更永久的解决方案。分割css在我们的特殊情况下解决了这个问题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73036151

复制

相似问题

问CSS属性选择器在Chrome中不工作
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS属性选择器在Chrome中不工作EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS属性选择器在Chrome中不工作
EN