Question

由于@support，我有两个包装A和B交换可见性。如果支持B，则B的div是可见的，如果不支持B，则A的div是可见的。

我使用这些包装器来交换div-contents（相同的图像，但是大小不同），现在我正面临着设置锚点到包装器内的元素的问题。 A中的div和B中的div应该共享相同的锚点，但我知道我不应该将相同的id赋予两次不同的内容。

我该怎么办？是否有可能使双方的元素共享相同的锚点？或者还有另一种解决方法吗？

＆＃13;

<style type="text/css">
 

.A {display: block}  
.B {display: hidden}

  
@support (...)

{html {...}
  
.A {display: hidden}  
.B {display: block}

 }


</style>

＆＃13;

<body>


<div class="A">  

<div id="anchor-x">
<...>
</div>

<div id="anchor-y">
<...>
</div>

<div id="anchor-y">
<...>
</div>



<div class="B"> 

<div id="anchor-x">
<...>
</div>

<div id="anchor-y">
<...>
</div>

<div id="anchor-z">
<...>
</div>



</body>
</html>

＆＃13;

Answer 1

解决方案是将您的ID从容器中取出并在每个部分中包含子容器：

<div id="anchor-x">
  <div class="A X">  
  ...
  </div>
  <div class="B X">
  ...
  </div>
</div>

<div id="anchor-y">
  <div class="A Y">  
  ...
  </div>
  <div class="B Y">
  ...
  </div>
</div>

<div id="anchor-z">
  <div class="A Z">  
  ...
  </div>
  <div class="B Z">
  ...
  </div>
</div>

您可能还想查看srcset，它将响应问题降低到<img>元素级别。

Answer 2

在父元素上有两个类，允许CSS级联用另一个类的属性覆盖一个类的特性。两者都具有相同的特异性，因此CSS将使用最后定义的规则。这可能会改变您的整体方法，但它确实允许条件逻辑而不使用javascript。

＆＃13;

aggregate(test$value, test[,1:2], min)
  fac1 fac2          x
1    A    a 0.32535215
2    B    a 0.14330438
3    C    a 0.33239467
4    A    b 0.33907294
5    B    b 0.08424691
6    C    b 0.24548851

＆＃13;

<style type="text/css">
 

.A {display: none}  
.B {display: block}

  
@support (...)

{html {...}
  
.A {display: block}  
.B {display: none}

 }


</style>

＆＃13;

如何在交换内容时使用锚点？

2 个答案: