css-specificity | 易学教程

Sorting a set of CSS selectors on the basis of specificity

阅读更多关于 Sorting a set of CSS selectors on the basis of specificity

问题 How can a set of CSS selectors be sorted on the basis of CSS specificity in a JS function? function SortByCssSpecificity(input_array_of_css_selectors) { ... return sorted_array_of_css_selectors; } 回答1: From the Selectors spec: A selector's specificity is calculated as follows: count the number of ID selectors in the selector (= a) count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b) count the number of type selectors and pseudo-elements in the

CSS class repetition to increase specificity

阅读更多关于 CSS class repetition to increase specificity

问题 According to the CSS docs: http://www.w3.org/TR/CSS21/cascade.html#specificity Specificity is defined by (amongst other things) the number of attributes and pseudo-classes in the selector. So, my question is, is it possible to increase specificity by repeating the same classname over and over again? For instance: would .qtxt.qtxt.qtxt.qtxt.qtxt { } have a higher specificity than .qtxt.lalgn { } or .lalgn .qtxt//(space added to create child selector) { } ? 回答1: Yes, it is possible and

Relationship between !important and CSS specificity

阅读更多关于 Relationship between !important and CSS specificity

Looking at the CSS specificity specification , there is no mention about how many "points" the !important rule is worth. When does one override another? What happens if one is declared after the other? Which rule is declared to be more important? Is there some sort of pattern? From the looks of it , !important applies to what has more specificity points to begin with. But what will happen if I declare a bazillion id's stacked with classes and nested deeply? Will it override the rules set in another, less specified rule marked with !important ? BoltClock Specificity in CSS only concerns

CSS specificity, Media Queries and min-width

阅读更多关于 CSS specificity, Media Queries and min-width

问题 I'm redesigning my blog with responsive web design in mind, and the "mobile first" method - In short I'm trying to use min-width to avoid any kind of replication or css.. no display:none's etc.. My problem is that when I do need to over-write a CSS value, the lower min-width takes precedence. Example: @media only screen and (min-width: 600px) { h2 { font-size: 2.2em; } } @media only screen and (min-width: 320px) { h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; } } I'd expect when I'm in

How do I give a CSS class priority over an id?

阅读更多关于 How do I give a CSS class priority over an id?

问题 I have a element like this: #idname{ border: 2px solid black; } .classname{ border: 2px solid gray; } <div id = "idname" class="classname">it is a test</div> I want to give a bigger priority to its CSS class instead of its CSS id. Is it possible? (In other word I want to set gray -color as its border ) 回答1: Do not use !important because it is the worst solution, if you want to switch the styling then do it that way. #idname{ border: 2px solid black; } #idname.classname { border: 2px solid

Can type selectors be repeated to increase specificity?

阅读更多关于 Can type selectors be repeated to increase specificity?

问题 The spec states regarding calculating CSS specificity: (bold mine) Note: Repeated occurrences of the same simple selector are allowed and do increase specificity. So for example .class.class {} has twice the specificity than .class {} - DEMO However, regarding the term \' simple selector \' the spec has this to say: (bold mine) A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any

Can I override inline !important?

阅读更多关于 Can I override inline !important?

问题 If you have <div style=\"display: none !important;\"></div> Is there a way to override that in the style sheet to make it displayed? Preferably using something similar to this: div { display: block !important; } 回答1: Let me begin by saying that generally inline styles can be overridden : .override {color:red !important;} <p style="color:blue;">I will be blue</p> <p style="color:blue;" class="override">But I will be red</p> Fiddled This behavior is described in W3 specs, where it is stated

Points in CSS specificity

阅读更多关于 Points in CSS specificity

问题 Researching specificity I stumbled upon this blog - http://www.htmldog.com/guides/cssadvanced/specificity/ It states that specificity is a point-scoring system for CSS. It tells us that elements are worth 1 point, classes are worth 10 points and IDs are worth 100 points. It also goes on top say that these points are totaled and the overall amount is that selector\'s specificity. For example: body = 1 point body .wrapper = 11 points body .wrapper #container = 111 points So, using these points,

What are the implications of using “!important” in CSS?

阅读更多关于 What are the implications of using “!important” in CSS?

问题 I\'ve been working on a website for a few months, and a lot of times when I\'ve been trying to edit something, I have to use !important , for example : div.myDiv { width: 400px !important; } in order to make it display as expected. Is this bad practice? Or is the !important command okay to use? Can this cause anything undesired further down the line? 回答1: Yes, I'd say your example of using !important is bad practice, and it's very likely it would cause undesired effects further down the line.