仅使用 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;}

这可能吗？？？

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 插件来做一些事情， 像这样：

1. 将“attrchange”脚本添加到 HTML 页面中

2. 在 Javascrip 中捕获事件

var email_ver_input = $("input#email_ver_input.verifyInput"); email_ver_input.attrchange({ 跟踪值：真， 回调：函数（事件）{ if (email_ver_input.is(":visible")){ $("#inputcode_wrap").show(); }
} });