1

属性セレクターを使用してインライン スタイル属性を部分的に検索することはできますか?

このコードを機能させる方法を見つけられる人はいますか?

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

これを行うことはできないようです.hidden[style*="display: block"] + .below。[style]

4

1 に答える 1

2

使用しようとしている属性セレクターは、jQuery 属性セレクターですが、正当なCSSではありません。私の知る限り、CSS は[attribute=value]、[attribute~=value]およびに限定されて[attribute|=value]います。（ダープ、以下を参照）

ただし、すでにjQueryを使用してhiddendivを切り替えているため、属性セレクターと格闘するよりも、divでクラスをbelow同時に切り替える方がはるかに簡単です（それ以上のものがない限り） .

変更された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;
} ​

ここでフィドル。

編集：さて、私は属性セレクターについて少し離れていました。それは合法的なCSS3です。ブラウザのサポートに関する詳細はわかりませんが、通常の「最新の」ブラウザはすべてサポートされていると思います。styleまた、特定の属性を対象とする IE7 には明らかに問題があります。http://www.impressivewebs.com/attribute-selectors/にかなり良い記事があります。

もう一度:これを明示的に確認するものは何も見つかりませんが、属性セレクターは、実際に html にハードコードされている属性にのみ適用されるようです。基本的には文字列を解析するだけで、dom 要素の「状態」自体を調べるのではありませんか?

于 2012-10-09T00:53:03.350 に答える