当用户选择一个单选按钮时,我想更改类的值。
我目前得到以下结构:
<div class="chat-box">
<input type="checkbox" />
<label> Name </label>
<ol class="discussion">
<li class="other">
<div class="avatar">
<img src="robert.jpg" />
</div>
<div class="messages">
<p>Yesh finally een nice intece met goede chats.</p>
<p>Nu nog een mooi font</p>
<time datetime="2009-11-13T20:00">Bas • 51 min</time>
</div>
</li>
<li class="self">
<div class="avatar">
<img src="robert.jpg" />
</div>
<div class="messages">
<p>Uhu</p>
<time datetime="2009-11-13T20:14">37 mins</time>
</div>
</li>
</ol>
<input type="text" placeholder="type here your message" class="chat-input">
</div>
每当用户选择单选按钮,我想隐藏discussion
和chat-input
。
我目前可以隐藏.discussion
,但我似乎找不到一个合适的运算符来隐藏chat-input
类。
这是我的工作 CSS:
.chat-box > input[type="checkbox"]:checked ~ .discussion, {display:none;}
我试过discussion::after
,但这也不起作用。
只需使用相同的Sibling ~
operator:
.chat-box & gt;input [type = "checkbox"]:选中~.chat-input
.chat-box > input[type="checkbox"]:checked ~ .discussion, .chat-box > input[type="checkbox"]:checked ~ .chat-input {display:none;}
<div class="chat-box">
<input type="checkbox" />
<label>Name</label>
<ol class="discussion">
<li class="other">
<div class="avatar">
<img src="robert.jpg" />
</div>
<div class="messages">
<p>Yesh finally een nice intece met goede chats.</p>
<p>Nu nog een mooi font</p>
<time datetime="2009-11-13T20:00">Bas • 51 min</time>
</div>
</li>
<li class="self">
<div class="avatar">
<img src="robert.jpg" />
</div>
<div class="messages">
<p>Uhu</p>
<time datetime="2009-11-13T20:14">37 mins</time>
</div>
</li>
</ol>
<input type="text" placeholder="type here your message" class="chat-input">
</div>
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(70条)