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;}

这可能吗???

Answer 1

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

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

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

Answer 2

你要做的事情并非“真的”可能。

我的意思是设计首先考虑不好。

即使Vamsikrishna的解决方案可能无法按预期工作。

如果您通过javascript或内嵌样式将overflow属性设置为hidden，则.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”类。

Answer 3

您可以使用attrchange-jQuery插件，像这样：