css - 使用来自另一个元素的选择器定位一个元素

Question

我正在尝试使用继续按钮的 [aria-expanded:true] 将跨度设置为“display:none”，但我不知道我是否可以那样定位跨度。

我一直在尝试同级选择器，但我不明白如何使用它们。

<h2>
<button class="btn btn-primary start" type="button" data-toggle="collapse" data-target="#projectID" aria-expanded="true" aria-controls="collapseExample">TITLE</button></h2>

<div class="projectmargin"><span class="matexcerpt"><?php the_excerpt(); ?></span>

<div class="collapse" id="project<?php the_ID(); ?>">
  <div class="card card-body">
  <span class="matexpanded"><?php the_content(); ?></a>

 </div>

我希望发生的是，当 aria-expanded 为“true”时，“matexcerpt”设置为显示:无，然后当 aria-expanded 为“false”时，“matexcerpt”显示为:内联。如果可能的话，我想用 CSS 来做到这一点。感谢您的任何见解!

Answer 1

您可以使用 attribute selector选择 aria-expanded值(value)和sibling选择器选择您的 matexcerpt类。

button[aria-expanded="true"] + .projectmargin .matexcerpt {
  display: none;
}

button[aria-expanded="false"] + .projectmargin .matexcerpt {
  display: block;
}

从上面的方法，你可以用CSS来做。您也可以使用 JavaScript。

这取决于你的 aria-expanded值，如果您可以通过 JavaScript 动态更改值，则需要为此使用 JavaScript，但如果您对 aria-expanded 有不同的组件值，CSS 是最佳选择。