I guess this is fairly simple for you but i cant wrap my head around it. I ripped out the important part. I got text inside #content so i cant change it and i dont want to use !important tag. The css is presented in the order it is placed in my css file.
How come the "#content h2 a, #content h2 a:visited" overrides the .post-header h2 a?
<html>
<head>
.....
</head>
<div id="content">
.....
<div class="post-header">
<a href="#">my text</a>
</div>
</div>
</html>
#content h2 a, #content h2 a:visited {
font-family:"arial black","lucida con开发者_运维知识库sole",sans-serif;
}
.post-header h2 a {
font-family:Arial,sans-serif;
}
/Joel
First, the browser checks the cascading order. Since the declarations are all for the same media, importance, and origin, the rules are ordered by specificity.
Next, the browser calculates the selector's specificity, and (here's the important part for your question) Id selectors are higher priority than class selectors:
A selector's specificity is calculated as follows:
- count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
- count the number of ID attributes in the selector (= b)
- count the number of other attributes and pseudo-classes in the selector (= c)
- count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
id is more specific than class. In your case you could add the id before the class.
#content .post-header h2 a {
font-family:Arial,sans-serif;
}
You can use the following:
.post-header h2 a {
font-family:Arial,sans-serif!important;
}
To add additional priority to a CSS rule, and ensure that it overrides any others.
Selectors based on ID's take precedent over selectors based on classes.
If you want your class-based style to override the ID selector, append a !important to the element style.
.post-header h2 a {
font-family:Arial,sans-serif !important;
}
!important doesn't work in IE6 though, if you care about those kind of things.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论