如何基于CSS页面中另一个元素的状态选择元素？

Question

我的元素可以反映不同的状态，或者由用户触发(:hover, :focus等等)或由服务器操纵(data-status="finished", disabled等等)。我可以针对已更改状态的元素，但我似乎无法找到一种方法，根据所述元素的状态来针对DOM中的其他元素。例子：<section>     <div>Element 1</div>     <div data-status="finished">Element 2</div>     <div>Element 3</div></section><section>     <div>Element 4</div>     <div class="blink">Element 5</div>     <div>Element 4</div>     <div>Element 4</div>     <div class="spin">Element 4</div>     ...</section>或者用适当的样式呈现服务器端的元素。是否有CSS选择器允许我根据目标元素的状态指定应该选择哪些元素？类似于：div[data-status~=finished]:affect(.blink, .spin)这样我也可以不具有相同父级的目标元素只有CSS？

Answer 1

我不会重复他讨论过的任何伪类选择器，

---

我们现在有一个新的伪类，在CSS 3中是*目标.

这个:target当URL中的散列和元素的id相同时，CSS中的伪选择器匹配。

(“目标”的具体用法是“样式”元素，该元素是目标元素，并且在视区顶部当前不可见)

因此，实际上可以根据用户交互(具体单击)使用(MIS)来更改其他元素样式，当与另一个伪类或同级选择器一起使用时。

例如：父母兄弟姐妹的目标子女。

:target section div[data-status=finished] {
  color: red;}a,a:visited {
  text-decoration: none;
  color: #000;}section {
  border: 1px solid grey;}

<nav id='nav'>
  <h4>This is Navigation section</h4>
  <section>
    sibling    <div><a href='#nav'>(child)click me to target child  of sibling of parent</a>
    </div>
  </section>
  <section>
    sibling    <div data-status="finished">(child)I am child of parent of sibling</div>
  </section></nav>

请注意，以前不可能对父元素或html层次结构中的任何其他元素进行样式设置。:target被介绍了。它仍然是新的，这样做(根据另一个元素的单击选择另一个元素)并不是原因。:target是为。

缺点:

1. 使用Target的目标元素，将不需要在单个页面中使用太多，或者它会使您在整个页面中畅所欲言。

2. 为元素指定的样式保持在它上，直到目标保持不变。