CSS 属性选择器与兄弟选择器混合

Question

是否可以使用属性选择器来部分搜索内联样式属性？

谁能找到让这段代码正常工作的方法？

http://jsfiddle.net/v4xPY/1/

似乎不可能做到这一点.hidden[style*="display: block"] + .below，甚至[style]也是不可能的。 p>

Answer 1

您尝试使用的属性选择器不是 legit CSS ，尽管它是一个 jQuery 属性选择器。据我所知，CSS仅限于[attribute=value]、[attribute~=value]和[attribute|=value] . (derp，见下文)

但是，由于您已经在使用 jQuery 来切换 hidden div，因此只需在 below div 上切换类会简单得多同时，而不是与属性选择器搏斗(除非有更多的东西)。

修改后的 jQuery:

$(function() {
  $('html').click(function() {
    $('.hidden').slideToggle();
    $('.below').toggleClass('yellow');
  });
});​

和 CSS:

/* Margin of Below should reduce when hidden is opened */
.yellow {
  margin-top: 10px; 
  background: yellow;
} ​

Fiddle here .

编辑:好吧，关于属性选择器我有点跑题了，它是合法的 CSS3；我不知道浏览器支持的细节，但我猜它会在所有常见的“现代”浏览器中得到支持。此外，IE7 显然存在专门针对 style 属性的问题。 http://www.impressivewebs.com/attribute-selectors/ 上有一篇很好的文章.

再一次:虽然我找不到任何明确证实这一点的东西，但看起来属性选择器只适用于实际上硬编码到 html 中的属性；基本上它只是解析字符串，而不是检查 dom 元素的“状态”？