CSS style overriding operation code
on the page, we often use it id、class and inline stylesheets to set our components CSS。 sometimes we use it for ease of coding CSS libraries, these libraries will set up globally CSS， but there are some components we don't want to use CSS what should i do if i want to use other special styles when i define the style in the library?
use custom CSS style overwrites previous CSS styles can solve this situation.
in the web page css style according to css use priority, those with high priority will cover those with low priority css style.
CSS the priority in the following is: inline style >id quote >class quote
example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < style>body {background-color: black;font-family: Monospace;color: green;}#orange-text {color: orange;}.class1 {color: pink ;}.class2 {color: blue;}< /style> |
the above css style description:
1、let's create a paragraph plus dot text to see what changes will happen to the font color.
1 | <p>Hello World!</p> |
no specified first id and class， the font defaults to body the style in green
2、for example, this code
1 | <p class="class1 class2" >Hello World!</p> |
this text will be inherited at the same time class1、class2 styles in, but when there are the same variables in these two classes, class when there is conflict, the latter definition is preferred, so the text font is blue。
3、id and class use simultaneously
1 | <p class="class1 class2" id="orange-text">Hello World!</p> |
at this time id cover class，the text font is orange。
4、id、class used simultaneously with inline styles
1 | <p class="class1 class2" id="orange-text" style="color:whitle">Hello World!</p> |
inline stylesheet override id and class，the text font is white。
5、if you want a certain variable of a certain style to be not overwritten, you can add it after it! important to force the priority，but only add id、class middle. for example, in orange-text in-house color add it later! important：
1 2 3 4 | #orange-text{color: orange ！important ;} |
1 | <p class="class1 class2" id="orange-text" style="color:whitle">Hello World!</p> |
in this case, even if there is an inline stylesheet setting color for white，color still for orange。
the above content ends here, let's take a look below CSS related knowledge about style coverage.
css style overlay
style overlay: if you want to modify its style when using some components, you can write a new style to overwrite the original style. the method is as follows: style three ways to write:
1 2 3 4 5 6 7 8 9 10 11 | <template> <view class="custom-transition"></view></template><style>/* 样式强制覆盖吧 */.custom-transition { width:100px !important; height:100px !important; background-color:red !important;}</style> |
the above is shared by suyou.com with everyone." CSS style overlay operation code", thank you very much for your patience to read this article. we will provide you with more information on reference or learning communication. we can also provide you with:enterprise website construction, website imitation, website copying, imitation site, foreign trade website construction, foreign trade website construction, company official website productionfor services, our company serves customers with the service concept of "integrity, professionalism, pragmatism and innovation". if you need cooperation, please scan the code to consult, and we will serve you sincerely.
TAG label:
