What to do if css style conflict occurs

Solution: 1. Refine the selector and write the description of the selector more accurately; 2. Write the selector name again; 3. Change the order in the CSS style sheet; 4. Actively improve the priority level, add the keyword "!important" after the style you want to use.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Refine the selector

Write the description of the selector more accurately by using a combiner. For example, for the following code snippet, if you want to add styles to .apple in .cellphones and only use .apple, it will inevitably affect .apple in .fruit.

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

You can use the more precise description of Descendant Combinator or Child Combinator. The more precise the description, the higher the priority, and higher-priority descriptions will override lower-priority descriptions.

/* 后代组合器：所有后代节点 */
.cellphones .apple {
	border: 1px solid black;
}

/* 更加精确的后代组合器 */
body .cellphones .apple {
  border: 1px solid blue;
}

/* 子代组合器：直接子节点 */
.cellphones > .apple {
  border: 1px solid red;
}

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

For detailed priority rules, see CSS Priority

2. Write the selector name again

is essentially a special case of the previous situation . 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 style sheet

For styles specified by the same type of selector, the later styles in the CSS file will overwrite the previous ones. style. 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 should be noted that although .blackBorder appears after .redBorder in the HTML file, the priority judgment based on their order in the CSS file. In other words, only the .redBorder that is later in the CSS file will be used.

4. Actively increase the priority (not recommended)

There is also a simple and crude way but not recommended, which is to add the key after the style that needs to be used The word !important can 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 appear green.

Using !important is a very bad habit. It will destroy the inherent cascading rules in the style sheet and make debugging very difficult!

Recommended learning: css video tutorial

The above is the detailed content of What to do if css style conflict occurs. For more information, please follow other related articles on the PHP Chinese website!