css特异性id与属性

Question

Having trouble understanding one particular specificity instance, maybe I'm over thinking it.

For example:

.class#id vs .class #id In the first case, the html would be something like right. So to me this makes me think it's acting like an attribute. Does that change the specificity?

Edit: In other words I'm asking .class#id : specificity=1-1-0 .class #id: specificity=1-1-0

Likewise, for instance .class[id="id"] attribute or id?

Answer 1

In the first case: .class#id matches

<div class="class" id="id"><div> <!-- matches this div -->

But this .class #id matches

<div class="class">
  <div id="id"> <!-- matches this div -->
</div>

Having no spaces in a CSS selector means they will apply to the same element. Spaces will imply child elements.

Specificity
In regards to your last case .class[id=id] is almost exactly the same as the first case: .class#id is "more specific" than .class[id=id] since attr 's in CSS have lower precedence than id 's.

For an excellent read on CSS specificity look here .

Answer 2

 .class#id{ background-color:red} /*specificity 0110*/ .class[id="id"]{ background-color:green} /*specificity 0020*/ 

 <div class="class" id="id">lorem</div> 

for .class#id, Specificity is

• 0 for inline style,
• 1 for ID,
• 1 for classses,attributes and pseudo-classes,
• 0 for Elements and pseudo-elements

for .class[id="id"], Specificity is

• 0 for inline style,
• 0 for ID,
• 2 for classses,attributes and pseudo-classes,
• 0 for Elements and pseudo-elements

Reference: Specificity Calculator