Home >Web Front-end >HTML Tutorial >The value problem of overlaying the same attributes in css_html/css_WEB-ITnose

The value problem of overlaying the same attributes in css_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:271478browse

For an element using multiple classes, one of the attribute values ​​​​has different values ​​​​in multiple classes, so what is the final value of the attribute of the element?

Of course, the one with higher priority overrides the one with lower priority.

Consider a css link file and an html file.

In css:

.form-control{	width: 100% ;	...}.width-control{	width:60% ;}


In html:

	1. <div class="form-control width-control">...</div>	2. <div class="width-control form-control">...</div>


When changing the writing order of classes in HTML above, we found that the valid values ​​are all width: 60%, which means that the writing order of parallel classes in a class in HTML does not affect the coverage order.


Change the order defined in css as follows:

.width-control{	width:60% ;}.form-control{	width: 100% ;	...}

The valid values ​​at this time are width:100 %, this shows that the priority of a class is determined by the order in which the class is defined in the css file: the later the class is defined, the higher the priority!


??

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