pseudo-class | 易学教程

Does CSS have a :blur selector (pseudo-class)?

阅读更多关于 Does CSS have a :blur selector (pseudo-class)?

问题 I know there is a :focus selector. I can\'t seem to find use of or documentation of a :blur selector. Is there one? 回答1: There is no :blur pseudo-class in CSS. The dynamic pseudo-classes, like other pseudo-classes and in fact all other selectors, represent states ; they do not represent events or transitions between states in terms of the document tree. To wit: the :focus pseudo-class represents an element that is in focus; it does not represent an element that has just received focus, nor

What is the difference between a pseudo-class and a pseudo-element in CSS?

阅读更多关于 What is the difference between a pseudo-class and a pseudo-element in CSS?

Things like a:link or div::after ... Information on the difference seems scarce. The CSS 3 selector recommendation is pretty clear about both, but I'll try to show the differences anyway. Pseudo-classes Official description The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. A pseudo-class always consists of a "colon" ( : ) followed by the name of the pseudo-class and optionally by a value between parentheses. Pseudo-classes are allowed in all sequences of simple

CSS :selected pseudo class similar to :checked, but for <select> elements

阅读更多关于 CSS :selected pseudo class similar to :checked, but for elements

问题 Is there a way to style the currently selected <option> element in a <select> element? I could then give a background color to the currently selected option element? That way I can style the option that\'s currently viewable in the closed dropdown. 回答1: the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes Source: w3.org So, this CSS works, although styling the color is not possible in every browser: option:checked { color: red; } An

How to write :hover condition for a:before and a:after?

阅读更多关于 How to write :hover condition for a:before and a:after?

问题 How to write :hover and :visited condition for a:before ? I\'m trying a:before:hover but it\'s not working 回答1: This depends on what you're actually trying to do. If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling

Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

阅读更多关于 Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

问题 In CSS it is possible to style placeholder text within an input using a combination of vendor-specific pseudo-classes and pseudo-elements (to get the best cross-browser coverage). These all share the same basic properties (ie: text styling and color declarations). However whilst I inevitably want to apply the same styles irrespective of browser vendor, it doesn\'t appear to be possible to combine these together into a comma-separated selector (as you would with any other piece of CSS where

css3 nth of type restricted to class [duplicate]

阅读更多关于 css3 nth of type restricted to class [duplicate]

问题 This question already has an answer here: Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? 6 answers Is there any way to limit css3\'s nth-of-type to a class? I\'ve got a dynamic number of section elements with different classes designating their layout needs. I\'d like to grab every 3rd .module , but it seems that nth-of-type looks up classes element type and then calculates the type. Instead I\'d like to limit it to only .module s. Thanks! JSFiddle to demonstrate:

:active pseudo-class doesn't work in mobile safari

阅读更多关于 :active pseudo-class doesn't work in mobile safari

问题 In Webkit on iPhone/iPad/iPod, specifying styling for an :active pseudo-class for an <a> tag doesn\'t trigger when you tap on the element. How can I get this to trigger? Example code: <style> a:active { background-color: red; } </style>  <a href=\"#\">Click me</a> 回答1: <body ontouchstart=""> ... </body> Applied just once, as opposed to every button element seemed to fix all buttons on the page. Alternatively you could use this small JS library called 'Fastclick'. It speed up

CSS :selected pseudo class similar to :checked, but for <select> elements

阅读更多关于 CSS :selected pseudo class similar to :checked, but for elements

Is there a way to style the currently selected <option> element in a <select> element? I could then give a background color to the currently selected option element? That way I can style the option that's currently viewable in the closed dropdown. Emmett the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes Source: w3.org So, this CSS works, although styling the color is not possible in every browser: option:checked { color: red; } An example of this in action, hiding the currently selected item from the drop down list. option:checked

What is the difference between a pseudo-class and a pseudo-element in CSS?

阅读更多关于 What is the difference between a pseudo-class and a pseudo-element in CSS?

问题 Things like a:link or div::after ... Information on the difference seems scarce. 回答1: The CSS 3 selector recommendation is pretty clear about both, but I'll try to show the differences anyway. Pseudo-classes Official description The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. A pseudo-class always consists of a "colon" ( : ) followed by the name of the pseudo

Why doesn't nth-of-type/nth-child work on nested elements?

阅读更多关于 Why doesn't nth-of-type/nth-child work on nested elements?

问题 I\'m trying to change the style of odd divs that are inside a div. For some reason the nth-of-type(odd) is affecting all my divs when it\'s inside another div. Here is my code for both the regular div and the odd divs: .video-entry-summary { width: 214px; height: 210px; margin-left: 10px; float: left; position: relative; overflow: hidden; border: 1px solid black; } .video-entry-summary:nth-of-type(odd) { width: 214px; height: 210px; margin-left: 0px; float: left; position: relative; overflow: