pseudo-class

问题 Is the following CSS syntax valid? a:first-child:hover { background-color: transparent; } If so, what is the compatibility as far as browsers? For example, is it compatible in IE8, IE6+, Firefox 4, Chrome, etc. 回答1: Combo first-child and :hover is correct(IE6 recognize only last pseudo-class in the chain): div span:first-child:hover { color: red; } <div> <span>asdasd</span> <span>asdasd</span> <span>asdasd</span> </div> 来源： https://stackoverflow.com/questions/27331619/multiple-pseudo-classes

问题 I'm firing several effects when I hover over a div. The problem is that the div also has the pseudo element ::after, which populates the div with a virtual element (a play button) using the content CSS rule. My hover effects work when I'm hovering any part of the div other than the space where the ::after element is. Simply, I want to know if there is a way to point towards the ::after element using jQuery. I've tried to define the ::after element as a variable named "play", but have had no

来源： https://stackoverflow.com/questions/59703607/applying-more-in-depth-selection-to-the-host-css-pseudo-class

来源： https://stackoverflow.com/questions/25065661/how-to-position-a-css-triangle-using-after

来源： https://stackoverflow.com/questions/25065661/how-to-position-a-css-triangle-using-after

来源： https://stackoverflow.com/questions/55427966/inputnotplaceholder-shown-label-selector-does-not-work-with-autofill

问题 I have a pretty odd CSS problem I want to solve. I'm looking for any html element which does not have display: none (in any of its valid forms) inline in a style attribute. Some examples: <foo style="display:none" /> <foo style="display: none" /> <foo style="display : none" /> <foo style="display : none" /> <foo style="bar:baz; display:none" /> I've been tinkering with the :not() negation pseudo-class but the following selector is apparently invalid: :not([style*='display'][style*='none']) It

问题 I'd like to use the tr:nth-child(even/odd) pseudo class for a table, but I want to support the IE 2 population as well. So, is there any purely css way to add a border to tr if nth-child isn't supported? 回答1: You can try Selectivizr, I think that's the easiest solution. EDIT: You could also use jquery to add classes for you: $(function() { $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); }); EDIT2: Also, if you're using Modernizr, you could try this. EDIT3 :) tr { border-bottom:

问题 I'd like to use the tr:nth-child(even/odd) pseudo class for a table, but I want to support the IE 2 population as well. So, is there any purely css way to add a border to tr if nth-child isn't supported? 回答1: You can try Selectivizr, I think that's the easiest solution. EDIT: You could also use jquery to add classes for you: $(function() { $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); }); EDIT2: Also, if you're using Modernizr, you could try this. EDIT3 :) tr { border-bottom:

问题 Is there any simple way make :focus & :active behave as :hover? Usually i write: .class a:hover, .class a:active, .class a:focus {...} But i would like to write just a single :hover rule and :focus & :active will look the same .class a:hover {...} 回答1: There is currently no better way to do so in CSS2/3. However, you might want to use cssnext to use the @custom-selectors and :matches() syntax today. With custom-selectors: @custom-selector :--enter :hover, :focus, .active; a:--enter { ... }