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

问题

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.

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.

回答1:

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 two classes.

You can address them such:

.post.quote { .... }

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

post_quote

回答2:

This element actually has two classes - it is marked with both the post class and the quote class. So, you can use the following selectors to access it:

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

回答3:

This might work:

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

来源：https://stackoverflow.com/questions/4695812/edit-css-style-of-an-element-with-a-space-in-its-class-name

标签

html

css

space

tumblr