我希望按钮标签能够切换其他类中文本元素的属性。这可能吗？

Question

我希望按钮标签（homebutton，aboutmebutton等）能够切换其他类（skillstext，Portfoliotext等）中文本元素的属性。

这可能吗？

#aboutmebutton:checked+ul li label aboutmebutton label p.aboutmetext {
	opacity: 0;
}

<ul>
  <li class="home">
    <input type="checkbox" id="homebutton">
    <label for="homebutton">
                        <a>Home</a>
                        <p class="hometext">This is the Home text.</p>
                    </label>
  </li>
  <li>
    <input type="checkbox" id="aboutmebutton">
    <label for="aboutmebutton">
                        <a>About Me</a>
                        <p class="aboutmetext">This is the About Me text.</p>
                    </label>
  </li>
  <li>
    <input type="checkbox" id="skillsbutton">
    <label for="skillsbutton">
                        <a>Skills</a>
                        <p class="skillstext">This is the Skills text.</p>
                    </label>
  </li>
  <li>
    <input type="checkbox" id="portfoliobutton">
    <label for="portfoliobutton">
                        <a>Portfolio</a>
                        <p class="portfoliotext">This is the Portfolio text.</p>
                    </label>
  </li>
  <li>
    <input type="checkbox" id="contactbutton">
    <label for="contactbutton">
                        <a>Contact</a>
                        <p class="contacttext">This is the Contact text.</p>
                    </label>
  </li>
  </ul

这是我想使用的CSS的示例，但无法了解：

Answer 1

您的CSS不正确。以下代码适用于所有按钮。

input:checked + label p {
  opacity: 0;
}

<ul>
  <li class="home">
    <input type="checkbox" id="homebutton">
    <label for="homebutton">
                        <a>Home</a>
                        <p class="hometext">This is the Home text.</p>
                    </label>
  </li>
  <li>
    <input type="checkbox" id="aboutmebutton">
    <label for="aboutmebutton">
                        <a>About Me</a>
                        <p class="aboutmetext">This is the About Me text.</p>
                    </label>
  </li>
  <li>
    <input type="checkbox" id="skillsbutton">
    <label for="skillsbutton">
                        <a>Skills</a>
                        <p class="skillstext">This is the Skills text.</p>
                    </label>
  </li>
  <li>
    <input type="checkbox" id="portfoliobutton">
    <label for="portfoliobutton">
                        <a>Portfolio</a>
                        <p class="portfoliotext">This is the Portfolio text.</p>
                    </label>
  </li>
  <li>
    <input type="checkbox" id="contactbutton">
    <label for="contactbutton">
                        <a>Contact</a>
                        <p class="contacttext">This is the Contact text.</p>
                    </label>
  </li>
  </ul