pseudo-class

问题 HTML <input required> <input required> <input required> JavaScript /* // Add script for noted :invalid check to work // :required can also be made to work by modifying script, i.e. changing "invalid" to "required" where noted // Source: http://stackoverflow.com/a/15821264/2171842 jQuery.extend(jQuery.expr[':'], { invalid : function(elem, index, match){ // modify pseudo-class here var invalids = document.querySelectorAll(':invalid'), // modify pseudo-class here result = false, len = invalids

问题 HTML <input required> <input required> <input required> JavaScript /* // Add script for noted :invalid check to work // :required can also be made to work by modifying script, i.e. changing "invalid" to "required" where noted // Source: http://stackoverflow.com/a/15821264/2171842 jQuery.extend(jQuery.expr[':'], { invalid : function(elem, index, match){ // modify pseudo-class here var invalids = document.querySelectorAll(':invalid'), // modify pseudo-class here result = false, len = invalids

问题 I have a nice little hover effect on my website that quickly transitions in as the user hovers over a link. But when the user leaves hovering over the box, the shadow (and other traits) go away immediately, instead of fading back out. Is there a way I can get the properties to fade both in AND out, maybe using some sort of :un-hover type pseudo class? Thanks! And here is the CSS block if it helps: a.squares:hover, a.squares:active { color: black; background-color: #E8E8E8; box-shadow: 0 0

问题 I have a nice little hover effect on my website that quickly transitions in as the user hovers over a link. But when the user leaves hovering over the box, the shadow (and other traits) go away immediately, instead of fading back out. Is there a way I can get the properties to fade both in AND out, maybe using some sort of :un-hover type pseudo class? Thanks! And here is the CSS block if it helps: a.squares:hover, a.squares:active { color: black; background-color: #E8E8E8; box-shadow: 0 0

问题 The CSS3 doc talks about :hover and :focus, which seem exactly the same to me. What are the differences between the two? What am I not seeing? Thanks! 回答1: Hover is 'true' when the mouse pointer is over an element. Focus is true if the cursor is in that element. It's possible for hover to be false and focus true (e.g click in a text field then move the mouse away) 回答2: :hover applies to any element that the mouse cursor is currently over. :focus refers to form focus, and is the current form

问题 The CSS3 doc talks about :hover and :focus, which seem exactly the same to me. What are the differences between the two? What am I not seeing? Thanks! 回答1: Hover is 'true' when the mouse pointer is over an element. Focus is true if the cursor is in that element. It's possible for hover to be false and focus true (e.g click in a text field then move the mouse away) 回答2: :hover applies to any element that the mouse cursor is currently over. :focus refers to form focus, and is the current form

问题 This question already has an answer here : Not getting correct output by :not() pseudo class (1 answer) Closed 8 months ago . Haii Looks like the css selector :not() doesn't work well with the * selector. Any way around it? Or am I doing something wrong? *:not(.nope){ color: green; } <div>hai</div> <div>I</div> <div class="nope">am</div> <div>Jhon</div> I still get 'am' as green. Thanks in advance! 回答1: The universal selector ( * ) is not the problem. It's the inheritance on the color

问题 This question already has an answer here : Not getting correct output by :not() pseudo class (1 answer) Closed 8 months ago . Haii Looks like the css selector :not() doesn't work well with the * selector. Any way around it? Or am I doing something wrong? *:not(.nope){ color: green; } <div>hai</div> <div>I</div> <div class="nope">am</div> <div>Jhon</div> I still get 'am' as green. Thanks in advance! 回答1: The universal selector ( * ) is not the problem. It's the inheritance on the color

问题 This issue is related to CSS pseudo-class. I refer to :last-child just for example, I suppose it happens to all other pseudo-class too. Given I have following simple HTML: <body> <p>Paragraph1</p> <p>Paragraph2</p> </body> I add following CSS: body:last-child{ color:red; } <body> <p>Paragraph1</p> <p>Paragraph2</p> </body> Without space both paragraphs will be marked as red When I will set space between .body and :last-child, only second paragraph will be marked as red - that happens in

问题 This issue is related to CSS pseudo-class. I refer to :last-child just for example, I suppose it happens to all other pseudo-class too. Given I have following simple HTML: <body> <p>Paragraph1</p> <p>Paragraph2</p> </body> I add following CSS: body:last-child{ color:red; } <body> <p>Paragraph1</p> <p>Paragraph2</p> </body> Without space both paragraphs will be marked as red When I will set space between .body and :last-child, only second paragraph will be marked as red - that happens in