单击父div时更改子级div的颜色. CSS伪 [英] Change children color div when click parent div | CSS Pseudo
问题描述
我对CSS不太了解.
我有 _sideButton 和默认颜色white
I have _sideButton with default color white
._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px}
._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px}
-
当我们选择按钮2时，
_sideButton变为红色，并且始终变为红色.How when we choose BUTTON 2, the
_sideButtonturns red, and always becomes red.当选择按钮1，按钮1
变为红色，然后BUTTON2 变为默认(白色). When selecting BUTTON 1, BUTTON 1
_sideButtonturns red, then BUTTON2_sideButtonbecomes default (white).*这里 === JSFiddle ===
*Here === JSFiddle ===
在-/-
/*** Here guys ***/ ._sideButton{background-color:white;height:100%;left:0;position:absolute;top:0;width:5px} ._sideButton:active{background-color:red;height:100%;left:0;position:absolute;top:0;width:5px} ._tabFolder{background-color:rgba(29, 33, 41, 1); cursor:pointer;position:relative;} ._tabFolder:hover{background-color:rgba(255,255,255,0.1)} ._tabFolder:active{background-color:rgba(29, 33, 41, 1)} ._itemPosition{align-items:center;display:flex} ._5bme ._sideFolder{background-color:#066cd2} ._iconText:hover ._1i5y,.uiPopover.selected ._1i5y{display:block} ._iconText{align-items:center;display:flex;justify-content:space-between;width:100%;margin-left:13px;}<body style="background:grey;"> <div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;"> <div class="_sideButton"></div> <div class="_iconText" style="width: 215px"> <span style="color:white;">BUTTON 1</span> </div> </div> <div class="_tabFolder _itemPosition" role="presentation" style="height: 40px; user-select: none;"> <div class="_sideButton"></div> <div class="_iconText" style="width: 215px"> <span style="color:white;">BUTTON 2</span> </div> </div> </body>推荐答案
对于CSS，您可以隐藏
<input type='checkbox'或'radio'>并使用<label for='ID OF RADIO/CHECKBOX'></label>.标签将充当按钮，而chx/rad将放置在标签之前，并将保持标签的状态"持续(例如，更改为红色并无限期保持红色).状态将由rad/确定. chx是:checked.For CSS you can hide
<input type='checkbox'or'radio'>and use<label for='ID OF RADIO/CHECKBOX'></label>. The label would act as the button while the chx/rad would be placed before the label and would keep the label's "state" persistent (ex. change to red and stay red indefinitely.) The state would be determined by whether the rad/.chx was:checked..radio:checked + .label { color:red }.radio 按钮经过:选中，紧随其后的 + 是文本的 .label 红色. + 是相邻的同级组合器，您也可能会这样:〜
A .radio button is :checked and right after it + is a .label that text turns red. The + is an adjacent sibling combinator and you may so this as well: ~ general sibling combinator.
您还可以使用
:target选择器 .取一个<a>nchor标签，为其元素的#id中的href属性分配值.然后为元素分配一个:target选择器.类似于rad/chx&标签组合，它使我们能够使用CSS动态更改元素样式并保持其持久性.You can also use the
:targetselector. Take an<a>nchor tag assign itshrefattribute the value of in element's#id. Then assign the element a:targetselector. Similar to the rad/chx & label combo, it allows us to use CSS to change an elements style dynamically and keep it persistent.尽管演示中显示了较旧"的同级(即单选按钮)和较年轻:同级(即标签)"的关系，但该演示也可以轻松地在父子关系中工作(提示:删除 + <a>和
element:target之间没有必要的关系(除了它们都必须在同一文档中.Although the demo shows an "older" sibling (i.e. radio button) and "younger: sibling (i.e. label) relationship, this demo can easily work in a parent child relationship as well (hint: remove +). Note there's no required relationship that needs to be between an
<a>andelement:target(other than that they both have to be on the same document./* Radio Buttons & Labels */ /* :checked & for='ID OF RADIO' */ .rad { display: none } .lab { border-radius: 9px; border: 2px inset grey; padding: 3px 5px; font-size: 24px; cursor: pointer; margin: 20px 10px; } .lab::before { content: 'WHITE'; } .rad:checked+.lab { background: red; color: white; } .rad:checked+.lab::before { content: '\a0\a0RED\a0\a0'; } /* Anchor & Any Element */ /* href='#ID OF ELEMENT' & #ANY:target */ a { display: inline-block; margin: 0 5px; color: yellow; background: #000; padding: 2px 4px; } a:first-of-type { color: #ff4c4c } a:nth-of-type { color: yellow } a:last-of-type { color: lime } b { display: block; height: 48px; width: 48px; border-radius: 50%; margin: 5px auto; border: 3px outset grey; background: rgba(0, 0, 0, .2) } #T1:target { background: red; } #T2:target { background: yellow } #T3:target { background: green }<input id='R1' class='rad' name='rad' type='radio'> <label id='L1' class='lab' for='R1'></label> <input id='R2' class='rad' name='rad' type='radio'> <label id='L2' class='lab' for='R2'></label> <input id='R3' class='rad' name='rad' type='radio'> <label id='L3' class='lab' for='R3'></label> <hr> <a href='#T1' target='_self'>STOP</a> <a href='#T2' target='_self'>SLOW</a> <a href='#T3' target='_self'>GO</a> <b id='T1'> </b> <b id='T2'> </b> <b id='T3'> </b>这篇关于单击父div时更改子级div的颜色. CSS伪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
