css-specificity | 易学教程

CSS precedence based on parent div

阅读更多关于 CSS precedence based on parent div

问题 If you view the following code in a browser the link appears red. I would expect it to be green because the secondary div is nested inside the primary div. It appears the color is determined by the order of the elements in the css file. If I move .secondary after .primary the link is green. <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> .secondary a { color: green; } .primary a { color: red; } </style> </head> <body> <div class=

Which CSS pseudo-classes don't have specificity?

阅读更多关于 Which CSS pseudo-classes don't have specificity?

问题 I'm studying a bit of CSS and from reading there are some pseudo-classes that don't have specificity like where() and not() . Are there more? 回答1: If you check the specification you can find the full detail of specificity calculation. I am going to refer to CSS selectors level 4 that include all the new selectors: A selector’s specificity is calculated for a given element as follows: count the number of ID selectors in the selector (= A) count the number of class selectors, attributes

Why do 'foo bar' and 'foo > bar' have the same specificity in CSS?

阅读更多关于 Why do 'foo bar' and 'foo > bar' have the same specificity in CSS?

问题 I'm curious why using > or other combinators does not affect the specificity of CSS selectors, i.e. why div span (matching a span somewhere inside a div) and div > span (matching a span which is the immediate child of a div) are considered equal regarding the specificity. I do realize that the usage of combinators is completely irrelevant for the specificity but I wonder if there's a certain reason for it. 回答1: This has actually been brought up in the working group mailing list, way back when

Why do 'foo bar' and 'foo > bar' have the same specificity in CSS?

阅读更多关于 Why do 'foo bar' and 'foo > bar' have the same specificity in CSS?

Programmatically set CSS selector specificity

阅读更多关于 Programmatically set CSS selector specificity

问题 Is it possible to set the specificity of a CSS selector, as opposed to it only being determined by counts of the selector(s) comprising it? i.e., if I have two selectors like so (showing the calculated specificity): UL OL LI /* a=0 b=0 c=3 -> specificity = 3 */ UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ (examples from https://www.w3.org/TR/selectors/#specificity) Is there any way to change the first example to this, in order to equalize the specificity of the two selectors and without

Calculating CSS selector specificity for :not() pseudo-class

阅读更多关于 Calculating CSS selector specificity for :not() pseudo-class

问题 I already know how to calculate selector specificity for CSS (the a/b/c/d mentioned in specs). However, I am having trouble figuring how to calculate it for the :not() pseudo-class. See the following example: input:not([type="text"],[type="password"],.someClass) {...} input:not(#someId[type="text"]) {...} Assuming both of them apply to one element, should these two be calculated as (0011) and therefore they should be ordered according to order of appearance? Or should the selectors inside the

CSS Selector Hierarchy?

阅读更多关于 CSS Selector Hierarchy?

问题 I have two classes that I think are pointing to the same thing, but it doesn't appear so when using 'left.' When I edit 'left' for the ".side-menu" selector, nothing happens, but when I change the 'left' value for ".white-menu .side-menu", the left value changes. When I add a border using .side-menu, however, a border appears. What's going on? I searched here and Googled for info on descendant selectors and selector hierarchies but couldn't find anything. Thanks in advance!! <!DOCTYPE html>

CSS Selector Hierarchy?

阅读更多关于 CSS Selector Hierarchy?

CSS Selector Hierarchy?

阅读更多关于 CSS Selector Hierarchy?

can an entire css “.class” have it's specificity as !important? [closed]

阅读更多关于 can an entire css “.class” have it's specificity as !important? [closed]

问题 It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 6 years ago . I am working heavily in jQuery UI widgets and themeing is becoming hard because of an oversight that I need to work around. Consider this problem: <div id="node" class="ui-widget"> <div class="ui-widget-content">