CSS pseudo-class selector

CSS pseudo-class selector

/* Element Selector */

UL {

padding:0;

margin:0;

width:450px;

border:1px dashed #666;

padding:10px 5px;

}

Ul:after {/* Child block Open Parent block */

Content: "; /* Add an empty content element at the end of a child element */

Display:block; /* and set to block-level display */

Clear:both; /* Clear two-side float */

/*visibility:none,!*hidden is also OK *!*/

/*height:0;*/

/*_height:1%;!* for ie*!*/}

Li {list-style:none;/* Remove the default list item style */

Float:left; /* Left floating */

width:40px; /* Set Width */

height:40px; /* Set Height */

line-height:40px; /* Text vertically centered */

Text-align:center; /* Text horizontally centered */

border-radius:50%; /* Set Border fillet */

Background:skyblue; /* Background color sky blue */

margin-right:5px; /* Right margin between each ball */}

/*:before: Insert before specifying selector, default to inline element */

Ul:before {/* insert text */content: ' topic.alibabacloud.com ';

/* Convert to block element */Display:block; }

Ul:before {/* switch to block element */display:block;

/*content:url (.. /html/images/5.jpg); * *

/*content: "; */

/* You can set the size only if the picture is set to the background */

/*background-image:url (.. /html/images/5.jpg); * *

/*background-size:100px 100px;*/

/*height:100px; */

/*width:100px;*/}

/*:after: Add elements after the specified element, default to inline elements, can be text, images, even videos, etc. */

Ul:after {/*content: ' www.php.cn '; * *

/*color:red;*/}

/*:first-child: Select the first child element in the parent element */

/* Note: The current page has only one UL element, so you can omit the parent ul*/

UL Li:first-child {

Background-color:brown;}

/*:last-child: Select the first child element in the parent element */

UL Li:last-child {

Background-color:lightgreen;}

/*:only-child: Select the element that is the only child element in the current parent element, IE does not support */

P:only-child {

/* Two Div, only one <p> child element in the first Div, all only selected <p>*/in the first Div

/*color:red;*/}

/*only-of-type: Select the unique <p> element under the parent element, unlike Only-child, which specifies the type of child element (label name) */

P:only-of-type {

/* First comment out the above only-child, you will find that the third Div in the P will also be selected, because it is specified p type of the unique child element */

color:red;}

The difference between Only-child and Only-of-type:

1. Common denominator: All select the only child element in the parent element;

2. Difference: Only-child does not qualify the type of child element, Only-of-type: Defines the type of child element, such as must be P label

<! DOCTYPE html>