CSS属性不是值选择器问题[重复]答案

【问题标题】：CSS attribute not value selector issue [duplicate]CSS属性不是值选择器问题[重复]
【发布时间】：2015-10-15 16:01:41
【问题描述】：

我有一个由我们公司使用的框架设置为display: 'none' 的 div。

<div id="mydiv" style="display: none">...</div>

但是当它显示时，它被设置为display: block，但我需要它是display: inline-block。所以我尝试像这样设置 div 的样式：

#mydiv:not([display='none']) {
    display: inline-block !important;
}

但它并没有像我预期的那样工作。我只想用 CSS 来实现这一点。有人知道如何以及是否可能吗？

【问题讨论】：

够了#mydiv{ display: inline-block!important; }
你有invalid selector
[display='none'] - 这不是元素本身的属性。样式将是属性。但是，#（ID's）应该用于定位特定/唯一元素，不应该有多个。所以定位 ID 本身就足够了。
好的，我知道了，谢谢！我刚刚意识到我的问题包含我自己的错误，我只想选择#mydiv，前提是它的显示样式未设置为“无”。
@Chris 不，它不起作用.. 当div 获得属性style="display: block" 分配时，display 值仍然是block！

标签： html css

【解决方案1】：

试试这个例子：http://codepen.io/anon/pen/WQZada
这里要检查的属性是style，（不是display）

#mydiv[style="display: none"] {
    display: inline-block !important;
}

无论如何，这是一种弱方法，因为标记的更改（例如，内联样式的缩小或编辑器更改）会影响样式（反之亦然）。

【讨论】：

感谢您的回答！我刚刚意识到我的问题包含一些错误.. 哈哈
好吧，它并没有真正起作用..但是您的回答通常是正确的。我现在得到了这样的#module_area[style*="display: block"]) { display: inline-block !important; }，但是当设置display: block 样式时，它不会更改为display: inline-block !important。我在这里做错了什么？还是仅仅是因为!important 以某种方式阻止了它？

【解决方案2】：

仅通过它的 id 定位元素就足以覆盖其内联样式：

#mydiv {
    display: inline-block !important;
}

&lt;div id="mydiv" style="display: none"&gt;Test Div&lt;/div&gt;

但是

为了这个问题，关于通过内联样式值选择元素，您可以定位 [style] 属性并检查所需的文本值

（问题是您需要匹配样式属性的确切书写形式）

#mydiv[style*="display: none"] {
    display: inline-block !important;
}

&lt;div id="mydiv" style="display: none"&gt;Test Div&lt;/div&gt;

【讨论】：