I. x: after
. Clearfix: after {
Content: "";
Display: block;
Clear: both;
Visibility: hidden;
Font-size: 0;
Height: 0;
}
. Clearfix {
* Display: inline-block;
_ Height: 1%;
}
I think the above code, many of my friends are very familiar with it. It is often used to clean up floating hack methods. : Used in combination with the after Pseudo Class and content to append content to the element class. The: after pseudo-class also has the following advantages: it is used to generate shadows. Click here to view details.
II. x: hover
Div: hover {
Background: # e3e3e3;
}
Hover has already been introduced in the previous article. ie6 only supports hover.
That is, use border-bottom: 1px solid black; better than text-decoration: underline;
According to the actual results, the distance between border-bottom and text-decoration is reasonable, but there are some risks such as color problems when border-bottom is used.
III. x: not (selector)
Div: not (# container ){
Color: blue;
}
Deny pseudo-class selector, which is easy to understand. The above will set the font color of the div whose non-id is container to blue.
: Not pseudo ie8 is not supported. ie9 is supported.
IV. x: PS tutorial eudoelement
P: first-line {
Font-weight: bold;
Font-size: 1.2em;
}
: Pseudo class, used to add a style to the fragment of an element. How can this be understood? For example, if you want to bold the text in the first line of a paragraph, this selector is the best choice.
In addition, you can add a special style to the first word. This application is still very common.
P: first-letter {
Float: left;
Font-size: 2em;
Font-weight: bold;
Font-family: cursive;
Padding-right: 2px;
}