为什么通用CSS选择器（*）会覆盖内联样式？

Question

我正在使用一个内部管理工具，该工具在Javascript上运行，其核心CSS文件中包含以下内容：

* {
    font-family: Helvetica, Verdana, Arial, sans-serif;
}

根据我的研究，这将是最低水平的特异性。 任何东西都会覆盖那个设置。

我的目标是更改整个页面上的字体以提高易读性。 我正在使用Python / Selenium webdriver和Firefox来修改标签的样式设置，这会导致以下内联HTML：

document.getElementsByTagName("body")[0].style = "font-family:Lucida Fax;";

<body style="font-family:Lucida Fax;" >

更改将传播到工作表。 但是，字体不会改变。 在“计算”视图下，我看到以下内容：

font-family: Helvetica,Verdana,Arial,sans-serif;
------------------------------------------------
*             > Helvetica,Verdana,Arial,sans-serif   core.css;
BODY[1].style > Lucida Fax                           element;

当我在进行更改后在Firefox Inspector中禁用* CSS属性时，将发生字体更改。 所以有些东西会覆盖我的内联样式更改。

我作为最终用户处于黑盒环境中，因此我无法解释所发生的一切。这是否是由于主动运行的Javascript迫使样式表先于内联样式而引起的？

Answer 1

<body>标记上的“style”属性仅影响<body>内容。 HTML中的所有各种<div>和<span>等标记都与CSS规则匹配。 （如果没有那个*规则，那么自然行为就是继承字体信息;但是对于所有CSS属性都不会发生继承。）

我所看到的建议是将所有内容设置为“继承”，然后将设置应用于<body> ：

body { font-family: Whatever; }
*, *::before, *::after { font-family: inherit; }

这允许您对某些元素进行覆盖（比如各种形式的小部件或其他）。

为什么通用CSS选择器（*）会覆盖内联样式？

问题描述

1 个解决方案

解决方案1
10 已采纳 2017-01-19 17:59:03

为什么通用CSS选择器（*）会覆盖内联样式？

问题描述

1 个解决方案

解决方案1 10 已采纳 2017-01-19 17:59:03

解决方案1
10 已采纳 2017-01-19 17:59:03