使用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」 級。