一、css 继承
1.1 继承规则
在 css 中，有一些属性值具有继承性，这些属性值可以被子元素所继承。这些属性值包括字体、颜色、文本排列等等。当子元素没有定义相应属性值时，会从其父元素继承该属性值。例如：
body { font-family: arial, sans-serif; color: #333;}h1 { font-size: 2rem;}
在上面的例子中，h1元素继承了body元素的font-family和color属性值。因为h1元素没有定义这些属性值，所以会从其上层元素继承。
1.2 避免滥用继承
尽管 css 继承可以节省代码、减少维护成本，但是滥用继承可能会导致不必要的样式继承，甚至造成不良影响。在使用继承时，需要注意以下几点：
1.2.1 不要将非通用属性设置为继承属性
在 css 中，有些属性值不具有继承性，如background-image、width、height等。这些属性值设置为继承属性无效，不会被子元素所继承。
1.2.2 不要将样式表结构过于复杂
如果样式表的结构过于复杂，可能会导致继承链条过长，增加了代码的不必要复杂性。在编写样式表时，应注意保持简洁明了的结构，尽量避免冗余。例如：
/* 不推荐 */.wrapper > .box > .title { font-size: 1.2rem;}.wrapper > .box > .content { font-size: 1rem;}/* 推荐 */.title { font-size: 1.2rem;}.content { font-size: 1rem;}
1.2.3 不要定义过多的继承属性
仅将必要的属性设置为继承属性，如果定义过多的继承属性会让代码难以维护、布局难以理解。在定义 css 属性时，需要考虑使用灵活、简单的样式。
1.3 使用继承
虽然滥用继承会导致不必要的样式继承，但是当使用得当时，css 继承还是非常有用的。以下是一些情况下可以使用继承：
1.3.1 统一字体属性
可以将字体属性设置在body元素上，然后通过继承使整个页面的字体风格保持一致：
body { font-family: arial, sans-serif; font-size: 1rem; line-height: 1.5;}
1.3.2 统一颜色属性
颜色是很重要的一个属性，可以通过继承来使整个页面的颜色保持一致。例如：
body { color: #333;}h1, h2, h3 { color: inherit; /* 继承父元素的颜色 */}
1.3.3 统一文本对齐方式
通过将text-align属性设置在一个共同的父元素上，可以使子元素遵循统一的文本对齐方式。例如：
body { text-align: center;}h1, h2, h3 { text-align: left; /* 继承父元素的文本对齐方式 */}
二、样式清除
在 css 中，有时候我们需要清除掉某些元素的默认样式，或取消已经设置好的样式。以下是一些可用于样式清除的方法：
2.1 重置样式表
可以使用重置样式表来清除默认样式，将所有元素的默认样式重置为基础样式。以下是 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;}
将上述代码插入到 css 样式表的开头，即可重置所有元素的默认样式。
2.2 使用 unset 进行清除
在 css3 中，有一种新的属性值unset。unset可以清除某个属性设置的继承效果，使元素重新获得该属性的默认值。例如：
a { color: inherit; text-decoration: none; outline: none; background-color: unset; /* 取消已经设置好的颜色 */}
2.3 使用 none 进行清除
当需要取消某个元素样式时，可以使用none值，例如：
input[type=checkbox] { -webkit-appearance: none; /* 取消浏览器默认外观 */ appearance: none;}
2.4 使用 !important 进行清除
!important是一种以最高优先级覆盖所有优先级的方式，可以覆盖继承的样式或设置了相同优先级的样式。例如：
p { color: #333 !important; /* 覆盖其它可能已经设定的颜色值 */}
2.5 使用 inherit 覆盖样式
使用inherit属性可以将某个属性值设置为继承其上层元素的值，从而覆盖当前元素的样式。例如：
h1 { font-size: 2rem;}h2 { font-size: inherit; /* 继承 h1 的 font-size 属性 */}
结语
在 css 开发中，继承与样式清除是比较常用的技巧，使用得当可以提高代码的可维护性和效率。但过度滥用这些技巧则会使代码难以维护和理解，甚至造成不必要的错误。开发者需要权衡继承与清除的利弊，充分发挥这些技巧的优点，避免不必要的复杂性。
以上就是css继承样式怎么清除的详细内容。