Several ways to solve CSS style conflicts (summary)

1. Refine the selector

By using combinators, the description of the selector can be written more precisely (refer to CSS selectors - MDN). For example, for the following code snippet, if you want to add styles to .apple in .cellphones, using only .apple will inevitably affect .apple in .fruit as well.

<div class="cellphones">
  <div class="apple"></div>
</div>
<div class="fruit">
  <div class="apple"></div>
</div>

A more precise description could be Descendant Combinator or Child Combinator. The more precise the description, the higher the priority. A higher priority description will override a lower priority description.

/* Descendant combiner: all descendant nodes*/
.cellphones .apple {
 border: 1px solid black;
}

/* More precise descendant combinator */
body .cellphones .apple {
  border: 1px solid blue;
}

/* Child combiner: direct child nodes */
.cellphones > .apple {
  border: 1px solid red;
}

If you add all the above styles to .apple in order, the border will eventually appear blue.

For detailed priority rules, see CSS Priority

2. Write the selector name again

Essentially a special case of the previous case. For example, for .apple, add the following style:

.cellphones > .apple.apple {
  border: 1px solid purple;
}
.cellphones > .apple {
  border: 1px solid red;
}

Eventually, the border will appear purple.

3. Change the order in the CSS stylesheet

For styles specified by the same type selector, the styles that come later in the CSS file will override the earlier styles.

For example, for the div element in the following code, the browser rendering result will be red:

<div class="redBorder" class="blackBorder"></div>

.blackBorder {
  border: 1px solid black;
}
.redBorder {
  border: 1px solid red;
}

It is important to note that although .blackBorder appears after .redBorder in the HTML file, the priority is determined based on their order in the CSS file. That is to say, only the .redBorder that is later in the CSS file will be used.

4. Actively increase priority (not recommended)

There is also a simple and crude method, but it is not recommended, which is to add the keyword !important after the style you want to use to raise the style priority to a very high level. For example:

<div class="redBorder" class="greenBorder"></div>

.greenBorder {
  border: 1px solid green !important;
}
.redBorder {
  border: 1px solid red;
}

For the above code, the border will be displayed in green.

Using !important is a very bad habit that breaks the cascading rules inherent in style sheets, making debugging very difficult!

References:
Priority - MDN
How to solve CSS style conflicts - Magic Time Machine

This concludes this article on several ways to resolve CSS style conflicts (summary). For more relevant CSS style conflicts, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!