css-specificity

Optimize CSS: Narrow Definition (#mytable tbody span.myclass) better?

由 北城以北 提交于 2019-12-08 05:22:58
问题 I wondered whether or not a 'narrow' definition such as #mytable tbody span.myclass { color: #ffffff; } is better/faster to parse than just .myclass { color: #ffffff; } I read somewhere that narrow definitions supposedly actually have some kind of adversery effect on CSS speed, but I can't remember where and it's been a while already so I just wanted to clarify if it matters or not, and if it does, which solution is better/faster. Thank you! 回答1: Google's Page Speed has some information

CSS priorities and targeting specific elements

由 假如想象 提交于 2019-12-07 07:41:35
问题 My question should be pretty strait forward. For some reason I can't wrap my head around it today. I'm making a menu with a structure like so <div class="wrapper"> <ul> <li class="menu-item"><a href="#">Menu Item</a> <div class="inner"> <a href="#">Login</a> </div> </li> </ul> </div> I am trying to target the login link using the following css selector: .inner a{} The selector is working, however the following selector is taking css presidence, and overriding the above selector: li.menu-item

Order CSS based on Selector Specificity

由 廉价感情. 提交于 2019-12-07 03:43:33
问题 I have parsed a given CSS file/string into a JSON object like so: { "#header": { "color": "#000000" }, "#header h1": { "color": "#000" }, "h1": { "color": "#4fb6e5" } } What I want to do now is re-order them based on Specificty. In this case, the #header h1 should come after the h1 in the JSON object as this is how they'll be applied in the browser. How can I do this? Are there any existing libraries for this? Or any useful libraries to help with this? I can use both Javascript/jQuery or PHP

CSS Specificity - Defining Classes & IDs

由 孤者浪人 提交于 2019-12-06 12:35:30
I've been reading up on specificity and, quite frankly, I'm surprised that I didn't know about this properly before, since I've witnessed the very issues that specificity can give if CSS is declared in the wrong manner. So, I've been doing a little research on the subject, and I now understand the rule for calculating specificity. However, during my findings, I've been left with three questions which I was hoping you guys could help me out with. Firstly, when relating to CSS specificity, I've noticed that one source includes pseudo elements in the calculation, while another tells you to leave

Specificity rules for comma delineated lists

由 谁都会走 提交于 2019-12-06 08:58:21
问题 When using Cascading Style Sheets I have observed the order of specificity as follows: 1st Laws : In-line Styles 2nd Laws : Number of ID Selectors 3rd Laws : Number of Class Selectors 4th Laws : Number of Element Selectors So, items with in-line styles came first, followed by declarations with one or more ID selectors, followed by declarations with one or more class selectors, followed by declarations with one or more element selectors. With more IDs, classes and elements meaning more

Why doesn't background color on body work?

由 寵の児 提交于 2019-12-06 08:09:44
问题 When viewing the code below in my browser the background is white. The universal selector * has the lowest specificity, and the body selector comes after the universal selector. Shouldn't it be grey? * { background-color: white; } body { background-color: grey; } 回答1: Let's break down the code in the question: * { background-color: white; } body { background-color: grey; } This is saying: Select every element and make its background color white. Select the body element and make its background

Same specificity, after taking placement into consideration, :first-letter always wins?

由 ≡放荡痞女 提交于 2019-12-05 17:36:48
问题 Take a look at this jsfiddle: http://jsfiddle.net/ZNddz/ .intro:first-letter { font-size: 130px; } span.letter { background-color: red; font-size: 30px; } p { font-size: 80px; } The first rule consist of one class selector and one pseudo-element selector = 11 The second rule consist of one class selector .letter and one tag selector span = 11 Both rules have same specificity so it is reasonably to believe that the winner should be the last style. Obviously it is not the case. So I decided to

CSS priorities and targeting specific elements

由 淺唱寂寞╮ 提交于 2019-12-05 14:04:57
My question should be pretty strait forward. For some reason I can't wrap my head around it today. I'm making a menu with a structure like so <div class="wrapper"> <ul> <li class="menu-item"><a href="#">Menu Item</a> <div class="inner"> <a href="#">Login</a> </div> </li> </ul> </div> I am trying to target the login link using the following css selector: .inner a{} The selector is working, however the following selector is taking css presidence, and overriding the above selector: li.menu-item a{} I'm totally baffled. Why would the second selector take style preference over the first? How would

Order CSS based on Selector Specificity

由 五迷三道 提交于 2019-12-05 07:26:02
I have parsed a given CSS file/string into a JSON object like so: { "#header": { "color": "#000000" }, "#header h1": { "color": "#000" }, "h1": { "color": "#4fb6e5" } } What I want to do now is re-order them based on Specificty. In this case, the #header h1 should come after the h1 in the JSON object as this is how they'll be applied in the browser. How can I do this? Are there any existing libraries for this? Or any useful libraries to help with this? I can use both Javascript/jQuery or PHP to do this. I'm looking for implementation advice and hopefully this has already been done! Short

Using multiple classes in one element and specificity

由 ∥☆過路亽．° 提交于 2019-12-04 16:22:08
问题 Just wondering when you use multiple classes on the one element such as class="foo bar" and those classes are setup as below: .foo { margin-right: 10px; } .bar { margin-right: 0px; } Which class will have specificity? Will the margin be 10px or 0px? 回答1: It works based on precedence within the CSS. Therefore the item to occur most recently will override any previous styles. CASE 1 .foo { background : red; } .bar { background : blue; } class = 'foo bar' would be blue in this instance. CASE 2
订阅 css-specificity