pseudo-class | 易学教程

CSS :not pseudo-class not working

阅读更多关于 CSS :not pseudo-class not working

I am learning about the :not() pseudo class and it is not working as expected. I want to color all text red except for .mind . For some reason this is not preventing the .mind element from being red. :not(.mind) { color: red } <div class='parent'> <div class='child'>One</div> <div class='child'>Two</div> <div class='child'>Three</div> <div class='child'>One</div> <div class='child'>Two</div> <div class='child'>Three</div> <div class='child'>One</div> <div class='mind'>mind</div> <div class='child'>Three</div> <div class='child'> <p>First paragraph</p> </div> </div> Keep this in mind: :not() is

link order in css

阅读更多关于 link order in css

问题 Whats the correct order of styling the <a> element (link, visited, hover, active). All are confusing by providing different combination like LVHA, LAHV. Can anybody specify the correct ordering? 回答1: Link Visited Hover Active To quote from the CSS specification: a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */ Note that the A:hover must be placed after the A:link

:before pseudo-class does't works with images

阅读更多关于 :before pseudo-class does't works with images

I have following HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>:before pseudo-class and images</title> <style type="text/css" media="screen"> img { display: block; width: 640pt; } img:before { content: "Test"; } </style> </head> <body> <img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="Ваза с цветами" /> </body> </html> :before will not appear for image, but it does for any div. Why ? Update: I found this explanation in W3C: Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML).

Use :not() pseudo-class in IE7/IE8

阅读更多关于 Use :not() pseudo-class in IE7/IE8

is there any way I can get the :not() pseudo-class to work in Internet Explorer 7/8? Is there any javascript that can do the same thing as the CSS3 :not() ? Or you can use Dean Edwards IE7.js Cole Yes, as regards JavaScript, jQuery and MooTools support the :not pseudo-class selector. http://mootools.net/docs/core/Utilities/Selectors#Selector:not http://api.jquery.com/not-selector/ Try using this css3 selectors for ie: http://selectivizr.com/ 来源： https://stackoverflow.com/questions/3077146/use-not-pseudo-class-in-ie7-ie8

Applying text-decoration on css generated content in IE

阅读更多关于 Applying text-decoration on css generated content in IE

It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class). Here is a JS Fiddle: http://jsfiddle.net/9N35f/ I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9. The question: Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+ Is there a bug report for this somewhere? Or is it actually by the standards? IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the

How to show the first N elements of a block and hide the others in css?

阅读更多关于 How to show the first N elements of a block and hide the others in css?

问题 I am trying to hide the first 3 elements having the class .row inside the block .container . What I'm doing is hiding all the .row first, and then I am trying to display the first 3 .row by using .row:nth-child(-n+3) jsfiddle here: http://jsfiddle.net/z8fMr/1/ I have two problems here: Row 3 is not displayed, am I using nth-child in the wrong way? Is there a better practice than hiding everything and then creating a specific rule to display the n first elements that I want? Is there a way in

Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order? [duplicate]

阅读更多关于 Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order? [duplicate]

This question already has an answer here: Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? 3 answers According to W3 Schools the order that the pseudo classes on the anchor element are declared is vitally important. Why is this? Are there any others? Andy G There is a detailed description here: http://meyerweb.com/eric/css/link-specificity.html It is related to CSS specificity. Citing from there: All of them can apply to a hyperlink, and in some cases, more than one will apply. For example, an unvisited link can be hovered and active at the same

Is there an opposite CSS pseudo-class to :hover?

阅读更多关于 Is there an opposite CSS pseudo-class to :hover?

Is there a pseudo-class in CSS to specify :not(:hover) Or is that the only way to specify an item that is not being hovered? I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover. Roko C. Buljan Yes, use :not(:hover) .child:not(:hover){ opacity: 0.3; } jsBin demo Another example; I think you want to: "when one is hovered, dim all other elements" . If my assumption is correct, and assuming all your selectors are inside the same parent: .parent:hover .child{ opacity: 0.2; // Dim all other elements } .child:hover{ opacity: 1; // Not

a vs a:link, What is the difference?

阅读更多关于 a vs a:link, What is the difference?

问题 What is the differences between a {...} and a:link{...} ? Are there different usages, and benefits between them? 回答1: According to W3C a:link is for not visited, a:visited is for visited, and just a applies to both. 回答2: a covers all the bases. a:link is used only if the link in un- visited , un- hover ed, and in- active . So, use a for things like font-family (if you want links to come up in a different font), then use link for the standard formatting, and visited , hover and active for

Css pseudo classes input:not(disabled)not:[type=“submit”]:focus

阅读更多关于 Css pseudo classes input:not(disabled)not:[type=“submit”]:focus

问题 I want to apply some css for inputs elements and I want to do that only for inputs that are not disabled and are not submit type, below css is not working, maybe if someone can explain me how this must be added . input:not(disabled)not:[type="submit"]:focus{ box-shadow:0 0 2px 0 #0066FF; -webkit-box-shadow:0 0 4px 0 #66A3FF; } 回答1: Instead of: input:not(disabled)not:[type="submit"]:focus {} Use: input:not([disabled]):not([type="submit"]):focus {} disabled is an attribute so it needs the