what is the priority of styling an element in html?

Just wondering which of these methods of styling has the priority while styling html:

<strong>Using CSS:</strong>

div{background-color:yellow}

<strong>Using style attribute:</strong>

<div style="background-color:red"></div>

<strong>Using script:</strong>

document.getElementsByTagName("div")[0].style.backgroundColor="green";

Answer1:

The last example will win, because it's the same thing as your second example (both are inline style properties), but happens later, overwriting red with green.

In general, it's (in descending order of priority):

    <li>Inline style properties with the !important flag</li> <li>CSS properties with the !important flag</li> <li>Inline style properties without the !important flag</li> <li>CSS properties without the !important flag</li> </ul>

    ...where within the "CSS properties" area there's the entire realm of specificity.

    Answer2:

    The priority is exactly opposite your list. Linked CSS-stylesheets are overridden by inline-styles, and JS-added rules will override both linked and inline styles. They are actually overwritten in the moment - not stored, but on load / when the JS is run, it will overwrite current styles for the remainder of the session (or longer, depending on how the JS is set up).

    Answer3:

    The css belongs to the css files, so using CSS is the normally the best option.It's better because is more readable, and its better organized than putting it directly in the html or via javascript.

    One important thing to be aware of, is the CSS Specifity. That means, different methods of writing CSS have different priority when the browser have to apply the styles. Check this link for the documentation about CSS Specifity:

    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Hope it helps

    人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:what is the priority of styling an element in html?