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

Question

I am working with an internal administration tool that runs on Javascript that has the following in its core CSS file: 我正在使用一个内部管理工具，该工具在Javascript上运行，其核心CSS文件中包含以下内容：

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

Based on my research, this would be the lowest level of specificity. 根据我的研究，这将是最低水平的特异性。 Anything would override that setting. 任何东西都会覆盖那个设置。

My goal is to change the font on the entire page to improve legibility. 我的目标是更改整个页面上的字体以提高易读性。 I am using Python / Selenium webdriver with Firefox to modify the tag's style setting with this Javascript, which results in the following inline HTML: 我正在使用Python / Selenium webdriver和Firefox来修改标签的样式设置，这会导致以下内联HTML：

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

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

The change is propagating to the sheet. 更改将传播到工作表。 However, the font doesn't change. 但是，字体不会改变。 Under the "Computed" view, I see the following: 在“计算”视图下，我看到以下内容：

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

When I disable the * CSS property in the Firefox Inspector after making the change, the font change will occur. 当我在进行更改后在Firefox Inspector中禁用* CSS属性时，将发生字体更改。 So something is overriding my inline style change. 所以有些东西会覆盖我的内联样式更改。

I am in a blackbox environment as an end user, so I can't account for everything happening.Could this be caused by an actively-running Javascript that is forcing the stylesheet to take precedent over inline styles? 我作为最终用户处于黑盒环境中，因此我无法解释所发生的一切。这是否是由于主动运行的Javascript迫使样式表先于内联样式而引起的？

Answer 1

The "style" property on the <body> tag only affects content that's in the body directly. <body>标记上的“style”属性仅影响<body>内容。 All the various <div> and <span> and etc. tags in your HTML are matched by the CSS rule. HTML中的所有各种<div>和<span>等标记都与CSS规则匹配。 (Without that * rule then the natural behavior is for font information to be inherited; inheritance doesn't happen for all CSS properties however.) （如果没有那个*规则，那么自然行为就是继承字体信息;但是对于所有CSS属性都不会发生继承。）

What I've seen recommended instead is to set everything to "inherit" and then apply the setting to the <body> : 我所看到的建议是将所有内容设置为“继承”，然后将设置应用于<body> ：

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

That allows you to have overrides for some elements (like various sorts of form widgets or whatever). 这允许您对某些元素进行覆盖（比如各种形式的小部件或其他）。

为什么通用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