使用CSS仅基于其可见性属性设置类的css属性

Question

我有一组div，其可见性设置为隐藏或可见。在此基础上的CSS visibility属性我需要添加CSS属性上的DIV，像

<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 attributre选择，你可以做到这一点 尝试下面的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” 级。