如何基于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是为。缺点:使用Target的目标元素，将不需要在单个页面中使用太多，或者它会使您在整个页面中畅所欲言。为元素指定的样式保持在它上，直到目标保持不变。