访问与以下级别相同的 css class

Question

我想在用户选择单选按钮时更改 class 的值。

我目前得到的结构如下：

<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 interface 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 class。

这是我的作品css:

.chat-box > input[type="checkbox"]:checked ~ .discussion, {display:none;}

我试过 discussion::after，但也没用。

Answer 1

就用一样的Sibling ~ operator:

.chat-box > input[type="checkbox"]:checked ~ .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 interface 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>

访问与以下级别相同的 css class

access css class that's on same level as

html

css

css-selectors