css styles are not inherited

In web design, CSS is a very important tool. It provides a variety of styles to beautify web pages, thereby improving users' experience of the website. However, sometimes in CSS, we encounter some more difficult problems. One of the problems is that CSS styles are not inherited.

What are CSS styles that are not inherited?

Simply put, CSS styles are not inherited when we set a style under a selector, but this style will not be inherited into the child elements of the selector. This situation often makes web design extremely difficult. For example, suppose we want to set a font size for the body text of the entire website, but if the font size of a child element under the selector has already been set, then all child elements under the selector will not inherit the font size. font size. This requires us to reset the font size in each sub-element, which is very cumbersome and not conducive to code maintenance.

Reasons for CSS styles not being inherited

Usually, CSS styles are not inherited for the following reasons:

1. Using special CSS properties

Some CSS properties do not support inheritance. For example, CSS properties such as display, position, float, and clear do not support inheritance. If these attributes are used in a selector, all child elements under the selector will not inherit the style.

2. The child element inherits the style of the parent element but is changed

Sometimes, setting a new style in the child element will cause the style to no longer be Inherited from the parent element. This is usually because the new style conflicts with the inherited style, causing the inherited style to be overridden.

3. Child elements are interpreted as sibling elements through selector rules

If the selector rule of a child element is interpreted as a sibling element, rather than a child of the parent element element, then the style will not be inherited. For example, if you use or ~ to select sibling elements in a style sheet, those styles will not be inherited.

How to solve the problem of CSS styles not being inherited

1. Use global selector

Use global selector to force child elements to inherit the style of parent elements. As shown below:

Parent element style:

.parent-element {
  font-size: 16px;
}

Child element style:

.child-element {
  all: initial;
  font-size: inherit;
}

In the child element style, we use all: initial to reset all styles Set it to the default value, and then use font-size: inherit to inherit the font size of the parent element.

2. Use CSS properties with better inheritance

Some CSS properties support inheritance. They can be set once by the parent element, but the child element will automatically inherit this value. For example, CSS properties such as color, font-size, and font-family all support inheritance. If we use these attributes in the selector, then child elements can inherit this attribute.

3. Reduce the nesting of selectors

Avoiding the nesting of selectors can avoid the problem of child element inheritance. When writing CSS styles, you should try to use simple selectors and avoid nesting of selectors.

4. Add !important when styles conflict

In some cases, we cannot avoid using special CSS properties or nesting of selectors. In this case, we can add it in the style Use !important at the end to ensure that this style has the highest priority, thus overriding other styles.

Summary

In CSS, styles that are not inherited may make web design particularly cumbersome. However, as long as we master some skills and methods, we can easily solve this problem. Using global selectors, using CSS properties with better inheritance, reducing the nesting of selectors, and using !important are common methods to deal with the problem of non-inheritance of CSS styles.

The above is the detailed content of css styles are not inherited. For more information, please follow other related articles on the PHP Chinese website!