编辑具有类名中带空格的元素的CSS样式

Question

我正在创建Tumblr主题，需要编写外部CSS文件，但我无法编辑文章元素的CSS样式。

这是它的结构：

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

问题是类名中有一个空格。

我该如何创建一个CSS类来访问它？是的，我知道我可以在元素标记中放置样式属性，但我也希望有另一个选项。

- nkcmr

---

通常会将其解释为两个类，您可以使用.post.quote（或.quote.post）选择它们，但某些版本的IE存在问题。 - reisio

请参见类似的问题，其中提供了有关浏览器如何解释多个类名的更多线索。 - Peter Krauss

Answer 1

问题在于类名中有一个空格。

CSS中不支持这种情况。你所做的是给元素赋予了两个类。

你可以按照以下方式访问它们：

.post.quote { .... }

但在你的情况下，最好使用有效的分隔符，比如

post_quote

- Pekka

---

这是一种“通过类名覆盖”的方法...但你说“在CSS中不可能”？InDesign5+可以做到，很多网页设计师也是如此...难道有W3C规则说“这是无效的”吗？ - Peter Krauss

@Peter 类名中带有空格是不可能的 - 你如何引用它们？考虑 .class name { font-size: 10px } - class 指的是一个类，而 name 指的是一个子元素。这是不可能的，请试一下。 - Pekka

是的，class="a b" 不是一个唯一的类名，就像 class="a_b" 一样。我的问题是关于 HTML 渲染中预期的覆盖效果（在这个例子中，b 覆盖了 a）... 是否有 W3C 有效的标准？还是这是 Adobe Indesign（导出 HTML）的发明？ - Peter Krauss

@Peter，我不确定你所说的“override”具体是什么意思？ - Pekka

在CSS定义中，我们有“.a {font-weight: bold;} .b {font-weight: normal;}”，在HTML body中我们有<p class="a b">not bold text</p>。所以，如果浏览器呈现普通文本，我们可以说类b覆盖了a。好吧，我的浏览器并不总是这样做...好的，我提交了一个新问题，请参见https://dev59.com/2WYr5IYBdhLWcg3wRoOW。 - Peter Krauss

@Peter 啊，我现在明白了。据我所知，那是无效的。 - Pekka

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');

- Dexter

---

我并没有使用jQuery。那么我怎样才能用CSS实现呢：.post .quote { }？ - nkcmr

选择器（上面引号中的位）在CSS中是相同的。 - Dexter

Answer 3

这可能有效：

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

- Diodeus - James MacFarlane