css-specificity | 易学教程

Specificity of inherited CSS properties

阅读更多关于 Specificity of inherited CSS properties

问题 What is the level of CSS specificity received by inherited properties? I read through the W3 recommendation regarding CSS specificity and so I understand how to calculate the different specificities of css rules which are directly targeting the same element, but I see no mention there of the level of specificity given to inherited attributes. In particular, the issue I'm encountering has to do with header elements, though I would be very interested to understand this in general. For example,

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/IaZW8jbI Attribute selectors are equally specific to class selectors. In your example, the first selector

How element selector is more specific than id selector?

阅读更多关于 How element selector is more specific than id selector?

问题 As I understand elements are least specific. (element vs id). Please help me in understanding the specificity of selectors generally. <div id="container"> <div id="firstDiv">FIRST Div inside CONTAINER</div> <div id="secondDiv">SECOND Div inside CONTAINER</div> </div> body{ width: 780px; margin: 20px auto; } #container > div:not(:last-of-type){ margin-bottom: 0px; /*How its more specific than ID selector below? */ } #container { border: 15px solid orange; padding: 10px; } #firstDiv{ margin:

CSS class priorities

阅读更多关于 CSS class priorities

I have a question about the priority of CSS classes after encountering a problem today. The situation is as follows: I have an unordered list which has a class associated with it. The LI tags have some styles defined too. I want to change the styling of the LI s after a click (via an added "selected" class), but the added class's styles are never applied. Is this normal behavior or should this code work? CSS: .dynamicList { list-style: none; } .dynamicList li { display: block; width: 400px; height: 55px; padding: 10px 10px 10px 10px; border: 1px solid #000; background-color: #ff0000; }

#id#id : Repeated occurrences of the same simple selector should increase specificity but don't for IDs in IE9

阅读更多关于 #id#id : Repeated occurrences of the same simple selector should increase specificity but don't for IDs in IE9

问题 For some time now I'm using a little trick that I thought was smart. That is combining the same css selector to add specificity to the rule's selector. CSS Specs do mention : Note: Repeated occurrances of the same simple selector are allowed and do increase specificity. http://www.w3.org/TR/css3-selectors/#specificity For example if HTML is <body> <section id="main"> <header class="titles"> <h2>Title red</h2> <h2 class="blue">Title blue</h2> </header> <h2 class="blue">Title blue</h2> <

Why can't I beat an ID with multiple classes? [duplicate]

阅读更多关于 Why can't I beat an ID with multiple classes? [duplicate]

问题 This question already has answers here : Closed 7 years ago . Possible Duplicate: Points in CSS specificity Here's an example of what I mean: http://jsfiddle.net/BTJXt/9/ Somehow 1 ID will beat a seemingly infinite number of classes. How is this being calculated? <style> div { height:200px; width:200px; } #big .little { /* Specificy value = 110 */ background-color:red; } #big .little.little { /* Specificy value = 120 */ background-color:blue; } .little.little.little.little.little.little

CSS :hover effect not working when I set an ID to the paragraph

阅读更多关于 CSS :hover effect not working when I set an ID to the paragraph

I have the following css3 transition with ease effect: HTML <div class="button"> <a href="#" onMouseOver="clicksound.playclip()"></a> <p id="myId" class="top"></p> </div> CSS * { padding: 0; margin: 0; } .button { width: 180px; margin-top: 45px; } .button a { display: block; height: 40px; width: 180px; /*TYPE*/ color: black; font: 17px/50px Helvetica, Verdana, sans-serif; text-decoration: none; text-align: center; text-transform: uppercase; } .button a { background:url(http://imageshack.com/a/img819/761/dqj.gif); margin: -50 0 0 0; z-index: -1; } p#myId { background: url(http://imageshack.com

How does CSS specificity decide which styles to apply?

阅读更多关于 How does CSS specificity decide which styles to apply?

How does CSS determine when to apply one style over another? I have been through the W3 CSS3 selectors document a few times, and that has helped me understand how to better use CSS selectors in jQuery, but it has not really helped me understand when one CSS rule will be applied over another. I have the following the HTML: <div class='item'> <a>Link 1</a> <a class='special'>Link 2</a> </div> I have the following CSS: .item a { text-decoration: none; color: black; font-weight: bold; font-size: 1em; } .special { text-decoration: underline; color: red; font-weight: normal; font-size: 2em; } Given

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; } BoltClock 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 selector (= c) ignore the universal selector Selectors inside the negation pseudo-class [ :not() ]

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) { } ? Yes, it is possible and intentionally so. While this is not mentioned in the CSS2 spec, it is explicitly mentioned in the Selectors 3 spec :