Some situations caused by priority problems in CSS

When developing front-end web pages on a website, you may encounter some strange problems from time to time. Sometimes, it is still difficult to understand. This is not the case. I encountered a problem that surprised me a few days ago: I did not display the wordpress comments when I replied, but the comments could be normally displayed. Initially thought it was a code problem and the result was not. Because the comments in the article are normally displayed, and the comments in the Atlas slides cannot be displayed. What's going on?

After multiple searches, I finally found the problem, as shown in the figure below:

Wordpress automatically adds the style property to the children label, so that the style I defined in the theme style.css does not work. Dizzy. What should we do? I want to solve the problem only when the style in my style.css takes precedence over the style automatically added by wordpress. In CSS, how does one take precedence over style? Only pass! Important;, because this level is the highest and the highest priority. Fortunately, this attribute is not automatically added to wordpress. So I added the related tags! Important; solve the problem.

The code is as follows:	Copy code
Ul. children {width: 610px! Important; left: 50px! Important; position: relative; overflow: hidden; padding: 0px; margin: 30px ;} Ul. children li. comment {width: 100%! Important ;}

The following describes the CSS priority:

[1 important flag]> [4 special symbols]> declaration order

! Important> style> [id> class> tag]

Use! Important can change the priority level to the highest level, followed by the style object, followed by id> class> tag. In addition, the style displayed after the same level style follows the declarative order has a high priority.