css-specificity | 易学教程

Why is this 11 class selector less specific than the ID? [duplicate]

阅读更多关于 Why is this 11 class selector less specific than the ID? [duplicate]

问题 This question already has an answer here : Why can't I beat an ID with multiple classes? [duplicate] (1 answer) Closed last year . #box { width: 100px; height: 100px; background-color: #ff0; } .one.two.three.four.five.six.seven.eight.nine.ten.eleven { background-color: #f00; } <div id="box" class="one two three four five six seven eight nine ten eleven"></div> If the following points are given to each type of selector, then how come the above class selector does not override the ID selector?

What is the specificity of the attribute selector?

阅读更多关于 What is the specificity of the attribute selector?

问题 I'm wondering what the specificity of the attribute selector is. For example: Id = 100 points Class = 10 points Html Tag= 1 point Example: /* this specificity value is 100 + 10 + 1 = 111 */ #hello .class h2 { } With this HTML: <div class="selectform"> <input type="text" value="inter text"> <input type="text" value="inter text" class="inputag"> </div> Which of these 2 selectors is more specific? .selectform input[type="text"] { } .selectform .inputbg { } Check to demo http://tinkerbin.com

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

Override Bootstrap table border-collapse style

阅读更多关于 Override Bootstrap table border-collapse style

问题 Bootstrap has a table {border-collapse: collapse; border-spacing:0;} style. I want to override this so I've create a class and applied it to the table in question: table.FormGroupContainer { border-collapse: separate; border-spacing: 2px; } but still the borders remain collapsed. The Chrome element inspector shows the Bootstrap CSS has been overridden but only disabling the style in the inspector allows a border spacing. I have observed this in IE 11 and Firefox 31.0. Inline styles also

Specificity between not() and first-child selectors

阅读更多关于 Specificity between not() and first-child selectors

问题 So we have the following example about not() and p:first-child{} selectors.Here is the example: <!DOCTYPE html> <html> <head> <style> p:first-child{ color: red; } p:not(a){ color: green; } </style> </head> <body> <p>This a paragraph.</p> </body> </html> Why the paragraph is red at the end? Can somebody explain (if possible ) why the p:first-child{} has bigger specificity than not() selector??? 回答1: Can somebody explain (if possible ) why the p:first-child{} has bigger specificity than not()

Does the :not pseudo class increase the specificity of a selector?

阅读更多关于 Does the :not pseudo class increase the specificity of a selector?

问题 I have read on css tricks that :not should not add additional specificity. But it looks like it does? https://css-tricks.com/almanac/selectors/n/not/ The specificity of the :not pseudo class is the specificity of its argument. The :not() pseudo class does not add to the selector specificity, unlike other pseudo-classes. Or am I missing something? .red:not(.blue) { background: blue; } .red { height: 100px; width: 100px; background: red; } <div class="red"> </div> 回答1: Yes, it adds the

CSS rules specificity

阅读更多关于 CSS rules specificity

问题 How can I count the rule specificity in CSS? I know the basic things (1000 for style, 100 for id, 10 for att/class, etc.) However, I still get stuck too many times with simple things, example: How much would this be? <div class="wrapper"> <div class="inner"></div> </div> .wrapper > div /* ??? */ .inner /* 10 */ The first rule is applied, obviously. But how much is it? 回答1: Basically, it's like this: !important styles always override all other styles, but amongst !important styles, specificity

CSS precendence in shadow DOM <style>

阅读更多关于 CSS precendence in shadow DOM

问题 What do the CSS precendence rules say about the <style> tag in shadow DOM? I have an element <component class="component"> , a CSS file included in <head> with: component { display: inline-block; } and a <style> tag inside some shadow DOM with: ::slotted(.component) { display: block; } If I understand it correctly, the first rule should have a specificity of 0.0.1 as it has one element and the second one specificity of 0.1.1 as it has one pseudo-element and one class. Therefore, the second

Order by CSS Specificity

阅读更多关于 Order by CSS Specificity

问题 My main goal is to try to reorder a CSS style block based on specificity. I previously had helped from SO and I managed to produce this function. See gist. Here is an example: function specificity($selector){ // https://gist.github.com/2774085 } $compare = function($a, $b) use ($specificity) { return $specificity($a) - $specificity($b) }; $array = css_array(); uksort($array, $compare); The above has been working great until I came across this CSS: html, body, body div{ background: transparent

Optimize CSS: Narrow Definition (#mytable tbody span.myclass) better?

阅读更多关于 Optimize CSS: Narrow Definition (#mytable tbody span.myclass) better?

I wondered whether or not a 'narrow' definition such as #mytable tbody span.myclass { color: #ffffff; } is better/faster to parse than just .myclass { color: #ffffff; } I read somewhere that narrow definitions supposedly actually have some kind of adversery effect on CSS speed, but I can't remember where and it's been a while already so I just wanted to clarify if it matters or not, and if it does, which solution is better/faster. Thank you! Google's Page Speed has some information regarding using efficient CSS selectors . I suggest starting there. So (very) basically, they recommend to: Avoid