css-specificity | 易学教程

Tool to see CSS specificity

阅读更多关于 Tool to see CSS specificity

Does anyone know if there is some kind of tool to see/pick the best CSS selector based on CSS specificity to target a particular div? I know what has higher specificity, but sometimes when working on other people projects where they have deeply nested selectors in there CSS,it is hard to find a way to override there stuff. I know in Google chromes dev tool/firebug it shows a lot of information at the bottom when viewing the page source, is that something that should be used for this or is there other methods? Use Chrome Inspector. DevFest 2010 - Chrome Developer Tools - In Depth Google Chrome

Why can't I override existing pseudo-elements?

阅读更多关于 Why can't I override existing pseudo-elements?

I have two CSS rules following each other: .some td:first-child:before { content:url('path/to/image.png')" " ; } .some .other:before { content:url('path/to/image2.png')" " ; } Here's the HTML snippet: <table class="some"> <tr> <td class="other">Text goes here</td> <td>Some more text.</td> </tr> </table> They're both supposed to be applied to the same table cell. The one without the class is meant as a fallback. But for some reason, it's always choosing the first rule over the second. I know the 2nd one works, since it will be used if i disable the first one in Firebug. What am I missing here?

What is the most character-efficient way to increase CSS specificity?

阅读更多关于 What is the most character-efficient way to increase CSS specificity?

问题 If I want to increase the CSS specificity of a rule, I tend to prefix with html , but I wonder if there are more concise ways of doing this? (It may seem like a trivial issue, but over the course of my stylesheets defining a responsive grid, decreasing the specificity prefix by a single character would save a few hundred bytes) 回答1: This really depends on what you're trying to achieve. A cheap way of increasing specificity is to simply repeat a selector. For instance, if this was your markup:

Why does the hover pseudo-class override the active pseudo-class

阅读更多关于 Why does the hover pseudo-class override the active pseudo-class

The title basically says it all. Suppose I have an element which I want to change color on :hover , but while clicked, I want it to switch back to its original color. So, I've tried this: a:link, a:visited, a:active { background: red; } a:hover { background: green; } As it turns out, this doesn't work. After a lot of head-scratching, I realized that the :hover state was overriding the :active state. This was easily solved by this: a:link, a:visited { background: green; } a:hover { background: red; } a:active { background: green; } (I could combine the 1st rule with the 3rd one). Here's the

CSS Specificity and Inheritance

阅读更多关于 CSS Specificity and Inheritance

问题 Given the following code: * { font-size: 18px; } .container { font-size: 50%; } <div class="container"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate explicabo fugiat laborum minus ullam? Amet delectus facilis id quam temporibus. </p> </div> The result is that the <p> tag has 18px font-size applied. But shouldn't every element that is inside of the div container inherit the font-size I apply to it? Regardless of the * selector applying the font-size to the <p> tag,

Precedence in CSS selector specifity conflicts (type vs class selector)

阅读更多关于 Precedence in CSS selector specifity conflicts (type vs class selector)

问题 I learned about selector precedence from this tutorial. I have trouble understanding the behavior of this in one case. I have an element in HTML: <input class="top_bar_login_form_input" type="text" name="email" placeholder="Prijavno ime"> The problem is that properties from another selector override the properties from the class. As shown in the picture above the class gets overridden by a less specific selector. The element gets selected by input[type="text"] , which is less specific than a

Why is my span blue instead of inheriting red from its parent?

阅读更多关于 Why is my span blue instead of inheriting red from its parent?

问题 Why in the following code world is blue rather than red? The specificity of .my_class is 0,0,1,0 , but it inherits the color of #my_id which specificity is higher ( 0,1,0,0 ). #my_id { color: red; } .my_class { color: blue; } <p id='my_id'> Hello <span class='my_class'> world </span> </p> 回答1: See: w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance An inherited value takes effect for an element only if no other style declaration has been applied directly to the

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 #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? Style attribute: 1,0,0,0 ID: 0,1,0,0 Class, pseudo-class, attribute selector: 0,0,1,0 Element: 0,0,0,1 Because the CSS

Tool to see CSS specificity

阅读更多关于 Tool to see CSS specificity

问题 Does anyone know if there is some kind of tool to see/pick the best CSS selector based on CSS specificity to target a particular div? I know what has higher specificity, but sometimes when working on other people projects where they have deeply nested selectors in there CSS,it is hard to find a way to override there stuff. I know in Google chromes dev tool/firebug it shows a lot of information at the bottom when viewing the page source, is that something that should be used for this or is

#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> </section> </body> And CSS #main .titles h2{ color: red; } #main .blue.blue{ color: blue; } This way I can use