css - 仅使用 CSS 根据其可见性属性设置类的 css 属性

Question

我有一组 div，其可见性设置为隐藏或可见。基于此 css 可见性属性，我需要在这些 div 上添加 css 属性，例如

<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
    [Block of Code]
</div>

现在我需要在 style.css 文件中定义以下内容。

.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}

这可能吗？？？

score 1 · Accepted Answer

是的，使用 css 属性选择器，您可以尝试以下 css：

.div-class[style*="visible"] {  
  color: green; 
}  

.div-class[style*="hidden"] {  
  color: red; 
}

score 0 · Accepted Answer

您尝试做的事情不是“真正”可能的。

我的意思是，这首先是设计上的错误想法。

甚至 Vamsikrishna 的解决方案也可能无法按预期工作。

如果您将overflow属性设置为hidden通过 javascript 或内联样式，.div-class[style*="hidden"]则将应用该规则，因为该style属性将包含hidden字符串。

此外，在大多数情况下，在 html 元素上设置内联样式本身就是不好的做法。

我建议您尝试多学习一下 css 原理。

我会做以下事情：

HTML

<div class="div-class div-hidden">
    [Block of Code]
</div>

CSS

.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}

然后你可以使用javascript来切换“ div-hidden”类。

score 0 · Accepted Answer

您可以使用 attrchange - 一个 jQuery 插件来做一些事情，如下所示：

3 回答 3