Question

我正在创建一个tumblr，我必须编写一个外部CSS文件，但我在编辑post元素的css样式时遇到了问题。

这个结构：

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

问题是班级名称中有一个空格。

我如何创建一个CSS类来访问它？是的，我知道我可以在元素标签中添加一个样式属性，但我还是希望有另一种选择。

Answer 1

问题是类名中有空格。

这在CSS中是不可能的。你正在做的是给元素两个类。

您可以解决这些问题：

.post.quote { .... }

但在你的情况下，使用像

这样的有效分隔符可能会更好

post_quote

Answer 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')
    }  
}

编辑具有类名称空间的元素的css样式

3 个答案: