All geek questions in one place

Why does the universal CSS (*) selector override the inline style?

I work with an internal administration tool that runs on Javascript, which has the following file in its main CSS file:

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

Based on my research, this will be the lowest level of specificity. All of this will override this setting.

My goal is to change the font throughout the page to improve readability. I am using Python / Selenium webdriver with Firefox to change the tag style setting using this Javascript, resulting in the following inline HTML:

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

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

The change applies to the sheet. However, the font does not change. In the "Calculated" 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;

CSS * Firefox , . , - inline.

, . Javascript, ?

+4
1

style <body> , . <div> <span> .. HTML CSS. ( *, , CSS.)

, "", <body>:

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

(, - ).

+10

Source: https://habr.com/ru/post/1667282/

More articles:


All Articles