Home  >  Article  >  Web Front-end  >  Detailed explanation of CSS priority calculation method

Detailed explanation of CSS priority calculation method

高洛峰
高洛峰Original
2017-03-07 13:59:191851browse

The main css selectors include id, class, tag, [],:,::, etc., and the priority of which usually needs to be judged is id, class, tag. In addition, inline styles and !important are also the same. The priority of css is related.

If the priorities of these five different situations are expressed in numerical form, the corresponding relationships are as follows:

!important(10000) > ; Inline style(1000) > id(100) > class(10) > tag(1)


Then the usual CSS priority comparison can be converted into a numerical size comparison, such as : #list li and .list .content ul li, the priority is:

100+1=101 > 10+10+1+1=22

The former's The priority is higher than the latter.

The above CSS priority calculation method (recommended) is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more detailed explanations of CSS priority calculation methods, please pay attention to the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn