可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
I have a css class like:
.foo { background-color: red; }
then I have a class specified for a list:
.list1 li { background-color: tan; }
is it possible to set one style class to just point to another? Something like:
.list1 li { .foo; }
not sure how to articulate that - I just want the .list li style to be whatever I define for the .foo class.
Thanks
回答1:
You can use selector grouping:
.foo, .list1 li { background-color: red; }
回答2:
No. The best you can do with "native CSS" is to use a multiple selector:
.foo, .list1 li { ... }
Otherwise there are preprocessors that can help with this such as SASS.
回答3:
Not with any syntax like that (and don't confuse a "class" (an HTML term) with a "class selector" or a "rule-set").
Your options are multiple classes, grouping selectors or preprocessing.
回答4:
You might want to look into a CSS preprocessor such as SASS or LESS. You can define variables that can be used throughout your code. It greatly speeds up your coding when you're familiar with it.
http://sass-lang.com/
http://lesscss.org/
Using SASS:
$darkred : #841c14; .box { background: $darkred; }
回答5:
Afaik, this isn't possible (yet) I hope it will be in the future. I always just copy+paste whatever I want to be the same into the desired selector or put the selector names one after another:
.foo, .li, .whatever {styles}
Maybe someone else has another suggestion.
回答6:
Inheritance is, as far as I know, not supported in CSS (2.1 at least)
回答7:
No you can't but you override it using naming differnt classes for example
.foo { background-color: red; }
.list1 li { background-color: tan; }
class ="list1 foo"
回答8:
to help clarify what is meant by overriding, if you want .list1 li to carry all the styles of foo, but just want to change it's color to tan, i would do this:
<span class = "foo"> <span class = "list1"><!--or whatever name you have for your new style--> TEXT WITH INHERITED STYLE GOES HERE </span> </span>