2. Pseudo classes and pseudo elements
A. Descendant selector after :hover
Example
| a:hover span { color: #0f0; } |
describe
An element can be positioned by a selector following the :hover pseudo-class, just like descendant selectors. The above example will change the color of the text in the span element within the a element when the mouse is hovered.
Support status
| IE6 No IE7 Yes IE8 Yes |
B. Chain pseudo-class
Example
| a:first-child:hover { color: #0f0; } |
describe
Pseudo-classes can be chained to narrow 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 status
| IE6 No IE7 Yes IE8 Yes |
C. :hover in non-anchor elements
Example
| div:hover { color: #f00; } |
describe
The :hover pseudo-class can be applied to the hover state of any element, not just a tags.
Support status
| IE6 No IE7 Yes IE8 Yes |
D. :first-child pseudo-class
Example
| div li:first-child { background: blue; } |
describe
Change the pseudo-class to locate the first child element of the parent element of each specified element.
Support status
| IE6 No IE7 Yes IE8 Yes |
Bugs
In IE7, if there is an HTML comment before the first child element to be positioned, 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 that have keyboard focus.
Support status
| IE6 No IE7No IE8 Yes |
F. :before and :after pseudo-classes
Example
| #box:before { content: "This text is in front of the box"; } #box:after { content: "This text is behind the box"; } |
describe
These two pseudo-elements add generated content before and after the specified element respectively, and are used together with the content attribute.
Support status
| IE6 No IE7No 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 for an absolutely positioned element will give the element its actual size (width and height), although no width and height values are set.
Support status
| 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 width and height of the element respectively, allowing a box to be larger than the specified minimum value, but not smaller. They can be used together or separately.
Support status
| 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 height and width of the element respectively. A box is allowed to be smaller than the specified maximum value, but not larger. They can also be used together or individually.
Support status
| IE6 No IE7 Yes IE8 Yes |