2. Pseudo-classes and pseudo-elements
A.: The descendant selector behind the hover
Example
| a:hover span { color: #0f0; } |
describe
An element can be positioned by a selector behind the :hover pseudo-class, just like a descendant selector. In the example above, when the mouse hovers, the color of the text in the span element in element a will be changed.
Support
| IE6 No IE7 Yes IE8 Yes |
B. Chain pseudo-category
Example
| a:first-child:hover { color: #0f0; } |
describe
Pseudo-classes can be chained to narrow down element selection. The above example will locate the first a tag under each parent element and apply the hover pseudo-class P to it.
Support
| IE6 No IE7 Yes IE8 Yes |
C. Among non-anchor elements:hover
Example
| div:hover { color: #f00; } |
describe
The :hover pseudo-class can be applied to any element's hover state, not just the a tag.
Support
| IE6 No IE7 Yes IE8 Yes |
D. :first-child pseudo-class
Example
| div li:first-child { background: blue; } |
describe
The pseudo-modified class locates the first child element of the parent element of each specified element.
Support
| IE6 No IE7 Yes IE8 Yes |
Bugs
In IE7, if the first child element to be located has HTML comments before, the first-child pseudo-class will be invalid
E. : focus pseudo-class
Example
| a:focus { border: 1px solid red; } |
describe
This pseudo-class locates all elements with keyboard focus.
Support
| IE6 No IE7 No IE8 Yes |
F, :before and :after pseudo-classes
Example
| #box:before { content: "This paragraph is in front of the box"; } #box:after { content: "This paragraph is behind the box"; } |
describe
These two pseudo-elements add the generated content before and after the specified element, and use it together with the content attribute.
Support
| IE6 No IE7 No IE8 Yes |
3. Attribute support
A. The actual size generated by position
Example
| #box { position: absolute; top: 0; right: 100px; left: 0; bottom: 200px; background: blue; } |
describe
Defining top, right, bottom, and left values to absolutely positioned elements will give the actual size (width and height) of the element, although there is no setting to make the width and height values.
Support
| IE6 No IE7 Yes IE8 Yes |
B. Min-Height and Min-Width
Example
| #box { min-height: 500px; min-width: 300px; } |
describe
These two properties specify the minimum values of the width and height of the element, allowing a box to be larger than the specified minimum value, but not smaller. They can be used together or separately.
Support
| IE6 No IE7 Yes IE8 Yes |
C, Max-Height and Max-Width
Example
| #box { max-height: 500px; max-width: 300px; } |
describe
These two properties specify the maximum values of the height and width of the element, allowing a box to be smaller than the specified maximum value, but not larger. They can also be used simultaneously or individually.
Support
| IE6 No IE7 Yes IE8 Yes |