Home > Web Front-end > HTML Tutorial > css pseudo-class, pseudo-element_html/css_WEB-ITnose

css pseudo-class, pseudo-element_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:46:51
Original
1205 people have browsed it

Pseudo class applies to the entire element, such as:

a:link{color:#111;}                                                                                                  

div:first-child{color:#333;}

Although these conditions are not based on DOM, none of the results are applied to a complete element, such as an entire link, paragraph, div etc.;

pseudo-element acts on part of the element, for example:

p::first-line{color:#555;}

p ::first-letter{color:#666;}

The pseudo-element acts on a part of the element, the first line or the first letter of a paragraph;

:before has the same effect as ::before, the former is written in css2, and the latter is written in css3

Function 1:

:before and :after can add pure The complexity of CSS design does not require redundant tags. We can use pseudo-elements to add additional styleable elements or levels. For example, if we want to add a phone icon in front of the phone number font, we can do this:

.phoneNumber:before {

content : "☎" ;

font-size : 15px ;

}

Function 2:

Clear floating

/* For modern browsers */

. cf:before, .cf:after {

content : "" ;

display :table;

}

.cf:after {

clear : both ;

}

/* For IE 6/7 (trigger hasLayout) */

.cf {

zoom : 1 ;

}

Here: before prevents top-margin merging, and :after is used to clear floats

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template