css-cascade | 易学教程

Why is * given more specificity than property inheritance in CSS?

阅读更多关于 Why is * given more specificity than property inheritance in CSS?

问题 Put simply, I have a page with these two styles: * { color: black; } div.error { color: red } And a page structure like: <html> ... <div class="error"> <div class="row form"> <div class="column"> Error text. </div> </div> </div> ... </html> You would expect "Error text" to be red, wouldn't you. But it is, in fact, rendered black in all browsers. Is this the expected behavior? My second question, is contingent on whether this is the expected behavior. if it is, then why would a designer ever

Overriding CSS property all: unset

阅读更多关于 Overriding CSS property all: unset

问题 For a CSS framework I am developing, I am using all: unset , which by itself works fine: #foo { all: unset; } However, in certain cases, I want to "undo" the effect of this rule, as in #foo:hover { all: auto; } However, this obviously does not work because there is no value of auto for all . Instead, we have the values inherit and initial , which instead of "cancelling" the all property, have different effects: of reverting all values to their parent's value, or their initial (I assume this

Overriding CSS property all: unset

阅读更多关于 Overriding CSS property all: unset

For a CSS framework I am developing, I am using all: unset , which by itself works fine: #foo { all: unset; } However, in certain cases, I want to "undo" the effect of this rule, as in #foo:hover { all: auto; } However, this obviously does not work because there is no value of auto for all . Instead, we have the values inherit and initial , which instead of "cancelling" the all property, have different effects: of reverting all values to their parent's value, or their initial (I assume this means system-level default values). To accomplish what I want, I am currently doing #foo:not(:hover) {

Overriding CSS properties that don't have default values

阅读更多关于 Overriding CSS properties that don't have default values

问题 Is it possible in CSS to override a property if that property doesn't have a default value? For example, say your primary stylesheet defines a border for a particular element: #element { border: 1px solid #000; } If you wanted to disable the border from a secondary stylesheet, you could do this: #element { border: none; } Assuming the secondary stylesheet was loaded after the primary one, the border: none rule would take precedence and remove the border. But what if you were trying to

Different levels of CSS and the priority over each other

阅读更多关于 Different levels of CSS and the priority over each other

问题 I was reading a decent article here on this topic: http://www.plus2net.com/html_tutorial/css-types.php It came out highest ranked by Google for the search term css style sheets priorities. However I think the site misinforms you and is incomplete! Can someone confirm my suspicions? 1) User Defined style is second lowest priority. In order to override other styles with it, you need to use !important to move it to highest. 2) It fails to mention the relative priorities of <link> versus @import

Overriding CSS properties that don't have default values

阅读更多关于 Overriding CSS properties that don't have default values

Is it possible in CSS to override a property if that property doesn't have a default value? For example, say your primary stylesheet defines a border for a particular element: #element { border: 1px solid #000; } If you wanted to disable the border from a secondary stylesheet, you could do this: #element { border: none; } Assuming the secondary stylesheet was loaded after the primary one, the border: none rule would take precedence and remove the border. But what if you were trying to override a property that doesn't have a default or null value? #element { position: absolute; left: 0; } Now

Different levels of CSS and the priority over each other

阅读更多关于 Different levels of CSS and the priority over each other

I was reading a decent article here on this topic: http://www.plus2net.com/html_tutorial/css-types.php It came out highest ranked by Google for the search term css style sheets priorities. However I think the site misinforms you and is incomplete! Can someone confirm my suspicions? 1) User Defined style is second lowest priority. In order to override other styles with it, you need to use !important to move it to highest. 2) It fails to mention the relative priorities of <link> versus @import and @import within <link> A more precise ordering would be (1 wins over 2 etc) : User defined (browser

Injected link stylesheet takes precedence over existing styles in IE7+

阅读更多关于 Injected link stylesheet takes precedence over existing styles in IE7+

问题 There seems to be a bug in IE when cascading dynamic stylesheets. Does anyone know if there is a workaround? Consider this: <head> <style>#test{background:red;}</style> </head> <body> <div id="test">test</div> <script> var link = document.createElement('link'); var style = document.getElementsByTagName('style')[0]; link.rel = 'stylesheet'; link.href = 'test.css'; style.parentNode.insertBefore(link, style); </script> </body> The injected 'test.css' contains #test{background:green} . Even

Injected link stylesheet takes precedence over existing styles in IE7+

阅读更多关于 Injected link stylesheet takes precedence over existing styles in IE7+

There seems to be a bug in IE when cascading dynamic stylesheets. Does anyone know if there is a workaround? Consider this: <head> <style>#test{background:red;}</style> </head> <body> <div id="test">test</div> <script> var link = document.createElement('link'); var style = document.getElementsByTagName('style')[0]; link.rel = 'stylesheet'; link.href = 'test.css'; style.parentNode.insertBefore(link, style); </script> </body> The injected 'test.css' contains #test{background:green} . Even though we place the <link> before the <style> tag, IE7+ will override the styles with the injected

What is the meaning of \"cascading' in CSS?

阅读更多关于 What is the meaning of \"cascading' in CSS?

What's the exact meaning of the term "Cascading" in CSS? I am getting different views, so I ask here. An example would help. "Cascading" in this context means that because more than one stylesheet rule could apply to a particular piece of HTML, there has to be a known way of determining which specific stylesheet rule applies to which piece of HTML. The rule used is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen. AmbroseChapel When I teach CSS, I always tell the students that "cascading style sheets" means something like "