css-specificity

CSS selector cascading/specificity not working as expected

由 落花浮王杯 提交于 2019-12-01 23:01:17
Details I'm working in FirefoxDeveloperEdition and experiencing unexpected selector prioritization. I've read through the Smashing Magazine article "CSS Specificity: Things You Should Know" and, insofar as I can tell, have constructed the CSS selectors as they ought be in order to achieve the intended level of specificity for each. However, the wrong declaration is being cancelled out. What's the issue, here? Have I not quite wrapped by head around the workings of selector specificity? Is this a bug? Or, something else? Project Code (simplified) /index.html <head> <link href="css/style.css"> <

CSS style precedence not working as expected

由 和自甴很熟 提交于 2019-12-01 21:59:06
问题 I have two styles, each declared in its separate 3rd party control that don't play well together and I'm not even sure why that is - and ultimately - how to make them work as I want. HTML: <table> <tr class="myrow"> <td>normal cell</td> <td class="ui-state-error">error cell</td> </tr> </table> CSS: .myrow>td { /* declared in the grid component */ background-color: #88f; } .ui-state-error { /* declared in jQuery UI */ background-color: #f00; } Both HTML & CSS simplified to show the exact error

text-decoration:none doesn't remove text decoration

由 狂风中的少年 提交于 2019-12-01 17:31:30
Consider the following code HTML: <span class='c1'>Home<sup id='id1'>[2]</sup></span> CSS: .c1 { text-decoration:underline; } #id1 { text-decoration:none !important; } Now I expected Home to have an underline while the superscript [2] doesn't have the underline. But it so happens that the superscript is also getting the underline. What am i missing here?? http://jsfiddle.net/sasidhar/DTpEa/ If you think about it, the sup isn't underlined. but the span still is. Since the sup is inside the span , you see the underline which appears to be sup 's underline. Consider this demo: http://jsfiddle.net

text-decoration:none doesn't remove text decoration

由 泪湿孤枕 提交于 2019-12-01 16:10:39
问题 Consider the following code HTML: <span class='c1'>Home<sup id='id1'>[2]</sup></span> CSS: .c1 { text-decoration:underline; } #id1 { text-decoration:none !important; } Now I expected Home to have an underline while the superscript [2] doesn't have the underline. But it so happens that the superscript is also getting the underline. What am i missing here?? http://jsfiddle.net/sasidhar/DTpEa/ 回答1: If you think about it, the sup isn't underlined. but the span still is. Since the sup is inside

Using two css files in the same html file

由 久未见 提交于 2019-12-01 07:11:53
问题 Is it possible to use 2 CSS classes that have the same name for the selectors, etc. in the same HTML file? If so, how do you differentiate between the two when styling elements? 回答1: Yes this is possible, simply include two css files in the HEAD section of the document. Any styles set in the first will be overwritten in the second, so say you have this: First file: #something{ background-color: #F00; color: #FFF; } And then in the second file: #something{ background-color: #000; } Then the

Efficient Algorithm To Compare Specificity Of CSS Rules

由 和自甴很熟 提交于 2019-12-01 04:46:07
I was wondering what an efficient algorithm would be in the following scenario: Given a parsed set of css rules, eg. p.pStyle{margin-bottom:20px;font-family:Arial;} p{font-family:Verdana;} p.anotherPStyle{margin-bottom:10px;} from a css stylesheet, it is possible that several rule sets apply to a given element (say a <p class="pStyle anotherPStyle">hello</p> in my document). I need to determine what rules in the stylesheet apply to a given element firstly (so here that is p, pStyle and anotherPStyle ), and then create a Comparator that is able to sort the applicable rules by specificity (from

Did Chrome 40 break justify-content CSS overriding?

由 自闭症网瘾萝莉.ら 提交于 2019-12-01 02:29:25
I noticed with today's Chrome 40 update that justify-content does not seem to get properly overriden by subsequent style declarations. See this fiddle for an example: <div class="flex-parent"> <div class="flex-child"></div> <div class="flex-child"></div> </div> and .flex-parent { display: flex; position: absolute; top: 0; right: 0; left: 0; /* IT SHOULD BE POSSIBLE TO SAFELY REMOVE THESE TWO LINES BECAUSE THEY ARE OVERRIDEN: */ background: yellow; justify-content: center; } .flex-parent { /* Overriding background: it works! */ background: green; /* Overriding justify-content: NOPE ;-( */

Did Chrome 40 break justify-content CSS overriding?

由 你离开我真会死。 提交于 2019-11-30 22:03:18
问题 I noticed with today's Chrome 40 update that justify-content does not seem to get properly overriden by subsequent style declarations. See this fiddle for an example: <div class="flex-parent"> <div class="flex-child"></div> <div class="flex-child"></div> </div> and .flex-parent { display: flex; position: absolute; top: 0; right: 0; left: 0; /* IT SHOULD BE POSSIBLE TO SAFELY REMOVE THESE TWO LINES BECAUSE THEY ARE OVERRIDEN: */ background: yellow; justify-content: center; } .flex-parent { /*

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

由 拟墨画扇 提交于 2019-11-30 14:43:14
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 ). HTML: <p id='my_id'> Hello <span class='my_class'> world </span> </p> CSS: #my_id { color: red; } .my_class { color: blue; } 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 element. This style applies to an element with id="my_id" : #my_id { color: red; } ... and will

Why is the # selector of lesser specificity than anything?

由 给你一囗甜甜゛ 提交于 2019-11-30 12:44:06
Big bold caps-lock TL;DR: I KNOW HOW SELECTOR SPECIFICITY IS DETERMINED, I THINK IT USES FLAWED ASSUMPTIONS AND I CAN BACK MY IRRITATIONS UP WITH VALID SET THEORY RELATIONS, PLEASE DO NOT RESPOND EXPLAINING W3 CALCULATION RULES FOR SPECIFICITY, PLEASE READ THE QUESTION <- read that. This has bothered me for some time, when I write a style for some HTML that would be similar to below: ... <div id="outer"> <span id="inner"></span> <span></span> ... </div> ... Why would specificity rules make the selector "#outer span" more specific than "#inner"? ID's are unique, so when I say "#inner" I can
订阅 css-specificity