html - クラス名にスペースを含む要素の CSS スタイルを編集する

Question

tumblr を作成していて、外部 CSS ファイルを作成する必要がありますが、投稿要素の CSS スタイルの編集に問題があります。

これはその構造です：

<li class="post quote">
    {other code}
</li>

問題は、クラス名にスペースが含まれていることです。

これにアクセスするための CSS クラスを作成するにはどうすればよいですか? はい、要素タグにスタイル属性を入れるだけでよいことはわかっていますが、別のオプションを期待していました。

Answer 1

問題は、クラス名にスペースが含まれていることです。

これは CSS では不可能です。あなたがしていることは、要素に2つのクラスを与えることです。

次のように対処できます。

.post.quote { .... }

しかし、あなたの場合、おそらく次のような有効なセパレータを使用する方が良いでしょう

post_quote

Answer 2

この要素には実際には2 つのクラスがあり、postクラスとクラスの両方でマークされていquoteます。したがって、次のセレクターを使用してアクセスできます。

// css
.post { ... }   // elements with the post class
.quote { ... }  // elements with the quote class

// jQuery
var postLis = $('.post');
var quoteLis = $('.quote');

異なるセレクターを一緒に含めることで、セレクターをスタックして、セレクターのすべての条件を満たすすべての要素を返すこともできます。

// css
.post.quote { ... }  // elements with both the post and quote classes

// jQuery
var postAndQuoteLis = $('.post.quote');

Answer 3

これはうまくいくかもしれません：

$('li').each(function() {     
    if($(this).attr('class').indexOf(" ")>-1) {
       $(this).css('border','1px solid #ff0000')
    }  
}