admin管理员组文章数量:1394585
I am working with an internal administration tool that runs on Javascript that has the following in its core CSS file:
* {
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:
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. 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?
I am working with an internal administration tool that runs on Javascript that has the following in its core CSS file:
* {
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:
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. 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?
Share Improve this question edited Jan 19, 2017 at 17:58 Dai 156k30 gold badges303 silver badges424 bronze badges asked Jan 19, 2017 at 17:55 MavenACTGMavenACTG 1839 bronze badges 8-
4
Styles that are inherited from the parent have lower precedence than
*– castletheperson Commented Jan 19, 2017 at 17:59 -
2
Avoid using the
*selector as it's expensive for browsers to evaluate - if you want to set a font for an entire page, rely on inheritance instead by setting it on thebodyelement in CSS (body { font-family: foo; }). – Dai Commented Jan 19, 2017 at 17:59 - @Dai I understand that but I am an end user working with a developer's style sheet. Do you have a way I can override the style sheet assuming I do not have access to the source code? – MavenACTG Commented Jan 19, 2017 at 18:03
-
2
To override the style just add another
<style>after the stylesheet that gets imported, using the*selector again. – castletheperson Commented Jan 19, 2017 at 18:05 - 1 @MavenACTG Pointy can get credit. Upvoting the ment is fine. – castletheperson Commented Jan 19, 2017 at 18:40
1 Answer
Reset to default 11The "style" property on the <body> tag only affects content that's in the body directly. All the various <div> and <span> and etc. tags in your HTML are matched by the CSS rule. (Without that * rule then the natural behavior is for font information to be inherited; inheritance doesn't happen for all CSS properties however.)
What I've seen remended instead is to set everything to "inherit" and then apply the setting to the <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).
本文标签： javascriptWhy would a universal CSS selector (*) override an inline styleStack Overflow
版权声明：本文标题：javascript - Why would a universal CSS selector (*) override an inline style? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744097471a2590545.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论