Html 编辑类名中带有空格的元素的css样式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4695812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 06:09:34  来源:igfitidea点击:

edit css style of an element with a space in its class name

htmlcssspacetumblr

提问by nkcmr

I'm creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements.

我正在创建一个 tumblr 它们,我必须编写一个外部 CSS 文件,但是我在编辑 post 元素的 css 样式时遇到了麻烦。

This its structure:

这是它的结构:

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


The problem is that the class name has a space in it.

How would I create a CSS class to access this? And yes, I know I can just put a style attribute in the element tag but I was kind of hoping for another option.


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

我将如何创建一个 CSS 类来访问它?是的,我知道我可以在元素标签中放置一个样式属性,但我有点希望有另一种选择。

回答by Pekka

The problem is that the class name has a space in it.

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

This is not possible in CSS. What you are doing is giving the element twoclasses.

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

You can address them such:

你可以这样称呼他们:

.post.quote { .... }

but in your case, it's probably better to use a valid separator like

但在您的情况下,最好使用有效的分隔符,例如

post_quote

回答by Dexter

This element actually has twoclasses - it is marked with both the postclass andthe quoteclass. So, you can use the following selectors to access it:

这个元素实际上有2类-它标有两个postquote类。因此,您可以使用以下选择器来访问它:

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

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

You can also stack selectors to return all elements which meet all conditions in the selector, by including the different selectors together:

您还可以通过将不同的选择器包含在一起来堆叠选择器以返回满足选择器中所有条件的所有元素:

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

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

回答by Diodeus - James MacFarlane

This might work:

这可能有效:

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