CSS如何使color:当DOM同时具有.red和.yellow时变为橙色?

例如,我有一个div:

<div class="red yellow"><div>

和我的CSS:

.red{background-color:red;}
.yellow{background-color:yellow;}

并且当同时具有.red和.yellow类时,如何使div的背景色变为橙色?我认为类似的方式是:

.red .yellow{background-color:orange;}

我知道这不是正确的方法,但是如何归档我的要求?

seritwitch 回答:CSS如何使color:当DOM同时具有.red和.yellow时变为橙色?

尝试这种方式。两个类名之间不应有空格。

        private void DisableTabStopOnCheckedChange(object sender,EventArgs e)
        {
            // Assume the following STR:
            // 1. In any radiobutton panel,select any radiobutton (without ever invoking BackToMain function in the first post);
            // 2. Invoke the BackToMain function;
            // 3. In the same radiobutton panel as in step #1,click the second radiobutton.
            // Normally,without this function,if the user will now cycle through the controls using the Tab key,both the first and second radiobuttons will be tabbable,// and that's because in the BackToMain function we reset their Checked and TabStop properies,and that's something that should be handled automatically by the control itself.
            // Doing it manually means that for the *first time* selecting the second radiobutton,the first one's TabStop state won't update,which means both radiobuttons
            // will have the TabStop state set to true,causing both to be tabbable.
            // This is a gross hack to fix this by disabling TabStop on the first radio button if the second one is checked and the first one's TabStop state
            // is true (this should happen only after BackToMain has been invoked).
            if (((RadioButton)sender).Checked)
            {
                var firstRadioButton = ((RadioButton)sender).Parent.Controls[1];
                if (((RadioButton)firstRadioButton).TabStop == true)
                {
                    ((RadioButton)firstRadioButton).TabStop = false;
                }
            }
        }

请参阅此代码段。

.red.yellow { background-color:orange; }
.red { background-color:red; }
.yellow { background-color:yellow; }
.red.yellow { background-color:orange; }

,

HTML

<div class="red yellow"><div>

CSS

div{height:100px;} /* I added dummy height for div just to show output */

.red { background-color:red; }
.yellow { background-color:yellow; }
.red.yellow{background-color:orange;}

输出

enter image description here

本文链接:https://www.f2er.com/3161305.html

大家都在问