How to clear css inherited styles-Front-end Q&A-php.cn

The use of CSS inheritance and style clearing is inevitable in web development. When using CSS, you can inherit certain attribute values to other elements through inheritance, thereby reducing the amount of code and maintenance costs; however, sometimes you need to clear inheritance to achieve better style effects.

1. CSS inheritance
1.1 Inheritance rules
In CSS, there are some attribute values that are inherited, and these attribute values can be inherited by child elements. These property values include font, color, text alignment, etc. When a child element does not define a corresponding attribute value, it will inherit the attribute value from its parent element. For example:

body {
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    font-size: 2rem;
}

Copy after login

In the above example, the h1 element inherits the font-family and color## of the body element. #Attribute value. Because the h1 element does not define these attribute values, it will be inherited from its upper element.

1.2 Avoid Abuse of Inheritance

Although CSS inheritance can save code and reduce maintenance costs, abuse of inheritance may lead to unnecessary style inheritance and even cause adverse effects. When using inheritance, you need to pay attention to the following points:

1.2.1 Do not set non-universal properties as inherited properties

In CSS, some property values are not inherited, such as
background- image, width, height, etc. These attribute values are invalid if they are set as inherited attributes and will not be inherited by child elements.

1.2.2 Do not make the style sheet structure too complex

If the style sheet structure is too complex, it may cause the inheritance chain to be too long, adding unnecessary complexity to the code. When writing style sheets, you should pay attention to maintaining a concise and clear structure and try to avoid redundancy. For example:

/* 不推荐 */
.wrapper > .box > .title {
    font-size: 1.2rem;
}
.wrapper > .box > .content {
    font-size: 1rem;
}

/* 推荐 */
.title {
    font-size: 1.2rem;
}
.content {
    font-size: 1rem;
}

Copy after login

1.2.3 Do not define too many inherited properties

Only set necessary properties as inherited properties. Defining too many inherited properties will make the code difficult to maintain and the layout difficult to understand. When defining CSS properties, consider using flexible, simple styles.

1.3 Using Inheritance

Although misuse of inheritance can lead to unnecessary style inheritance, CSS inheritance is still very useful when used properly. The following are some situations where inheritance can be used:

1.3.1 Unified font attributes

You can set the font attributes on the
body element, and then maintain the font style of the entire page through inheritance Consistent:

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

Copy after login

1.3.2 Unified color attribute

Color is a very important attribute that can be inherited to make the color of the entire page consistent. For example:

body {
    color: #333;
}

h1, h2, h3 {
    color: inherit; /* 继承父元素的颜色 */
}

Copy after login

1.3.3 Unified text alignment

By setting the
text-align attribute on a common parent element, child elements can be made to follow unified text alignment. . For example:

body {
    text-align: center;
}

h1, h2, h3 {
    text-align: left; /* 继承父元素的文本对齐方式 */
}

Copy after login

2. Style Clearance

In CSS, sometimes we need to clear the default styles of certain elements, or cancel the styles that have been set. The following are some methods that can be used for style clearing:

2.1 Reset style sheet

You can use the reset style sheet to clear the default style and reset the default style of all elements to the base style. Here is the code from Eric Meyer's Reset CSS (https://meyerweb.com/eric/tools/css/reset/):

/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Copy after login

Insert the above code at the beginning of the CSS stylesheet to reset all The element's default style.

2.2 Use

unset for clearing In CSS3, there is a new attribute value
unset. unsetYou can clear the inheritance effect of a certain attribute setting so that the element regains the default value of the attribute. For example:

a {
    color: inherit;
    text-decoration: none;
    outline: none;
    background-color: unset; /* 取消已经设置好的颜色 */
}

Copy after login

2.3 Use

none for clearingWhen you need to cancel the style of an element, you can use the
none value, for example:

input[type="checkbox"] {
    -webkit-appearance: none; /* 取消浏览器默认外观 */
    appearance: none;
}

Copy after login

2.4 Use

!important for clearing
!important is a way to override all priorities with the highest priority, which can override inherited styles or have the same priority set style. For example:

p {
    color: #333 !important; /* 覆盖其它可能已经设定的颜色值 */
}

Copy after login

2.5 Use

inherit to override the style Use the
inherit attribute to set an attribute value to inherit the value of its upper element, thereby overriding the current The style of the element. For example:

h1 {
    font-size: 2rem;
}

h2 {
    font-size: inherit; /* 继承 h1 的 font-size 属性 */
}

Copy after login

Conclusion

In CSS development, inheritance and style clearing are relatively common techniques. Proper use can improve the maintainability and efficiency of the code. However, excessive abuse of these techniques will make the code difficult to maintain and understand, and even cause unnecessary errors. Developers need to weigh the pros and cons of inheritance and cleanup, take full advantage of these techniques, and avoid unnecessary complexity.

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