我选择了一个新的代码库，它在一个地方设置了color属性：
color
*, *:after, *:before { color: var(--color); }
并在其他任何地方设置--color，如链接、跨度、SVG、按钮等：
--color
a, a:link, a:visited, a:hover, a:active { --color: #1b4adc; }
这样做的目的是什么？它的行为与只使用color有什么不同，也许是将其重置为总是继承？
* { color: inherit; }
ddhy6vgd1#
在使用css变量样式方法和使用inherit属性之间有一个巨大的区别，那就是inherit将直接从父元素继承，该元素可以是任何东西，而你只想在整个应用程序中保持一个自定义颜色。使用一个var(--color)，你可以有一种颜色，然后将它应用到所有的标题，例如，它将保持相同的主题，但inherit将继承父元素包含的任何颜色，这将使你的主题更难保持一致。
inherit
var(--color)
注意：使用color: inherit时，如果父项没有颜色设置，则会选择浏览器默认值。使用本网站可以按元素查看浏览器默认值。
color: inherit
sqxo8psd2#
在所有元素上将color属性设置为var（--color），然后在其他地方定义--color的目的可能是在整个代码库中创建一致且易于修改的配色方案。在所有元素上使用值为inherit的color属性将使每个元素的文本颜色继承其父元素的颜色。但是，这可能会使跨代码库创建一致的配色方案变得困难，因为这需要手动设置每个文本元素的每个父元素上的color属性。通过使用var（--color），代码库可以定义一个单一的CSS变量--color，可以很容易地修改它来更改整个代码库中所有文本元素的颜色。这可以简化更改代码库配色方案的过程。此外，使用var（--color）而不是inherit可以确保文本元素始终具有定义的文本颜色，而不管它们的父元素。这有助于避免在color属性设置为inherit时可能发生的意外或意外的文本颜色更改。总的来说，在所有元素上使用var（--color）并在其他地方定义--color可以帮助在代码库中创建一致且易于修改的配色方案。
2条答案
按热度按时间ddhy6vgd1#
在使用css变量样式方法和使用
inherit属性之间有一个巨大的区别，那就是inherit将直接从父元素继承，该元素可以是任何东西，而你只想在整个应用程序中保持一个自定义颜色。使用一个
var(--color)，你可以有一种颜色，然后将它应用到所有的标题，例如，它将保持相同的主题，但inherit将继承父元素包含的任何颜色，这将使你的主题更难保持一致。注意：使用
color: inherit时，如果父项没有颜色设置，则会选择浏览器默认值。使用本网站可以按元素查看浏览器默认值。sqxo8psd2#
在所有元素上将color属性设置为var（--color），然后在其他地方定义--color的目的可能是在整个代码库中创建一致且易于修改的配色方案。
在所有元素上使用值为inherit的color属性将使每个元素的文本颜色继承其父元素的颜色。但是，这可能会使跨代码库创建一致的配色方案变得困难，因为这需要手动设置每个文本元素的每个父元素上的color属性。
通过使用var（--color），代码库可以定义一个单一的CSS变量--color，可以很容易地修改它来更改整个代码库中所有文本元素的颜色。这可以简化更改代码库配色方案的过程。
此外，使用var（--color）而不是inherit可以确保文本元素始终具有定义的文本颜色，而不管它们的父元素。这有助于避免在color属性设置为inherit时可能发生的意外或意外的文本颜色更改。
总的来说，在所有元素上使用var（--color）并在其他地方定义--color可以帮助在代码库中创建一致且易于修改的配色方案。