Home >Web Front-end >CSS Tutorial >css pseudo class selector
css pseudo class selector
- 无忌哥哥Original
- 2018-06-28 17:16:141889browse
css pseudo-class selector
/*Element selector*/
ul {
padding: 0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after { /*The child block props up the parent block*/
content:''; /*Add an empty content element at the end of the child element*/
display: block; /*And set to block-level display*/
clear:both; /*Clear the floats on both sides*/
/*visibility: none; !*hidden also Line*!*/
/*height: 0;*/
/*_height: 1%; !*For IE*!*/}
li { list -style: none; /*Remove the default list item style*/
float: left; /*Left float*/
width: 40px; /*Set the width*/
height: 40px; /*Set the height*/
line-height: 40px; /*Center the text vertically*/
text-align: center; /*Center the text horizontally*/
border-radius: 50%; /*Set border rounded corners*/
background: skyblue; /*Background color sky blue*/
margin-right: 5px; /*The right margin between each ball*/}
/*:before: Insert before the specified selector, the default is an inline element*/
ul:before {/* Insert text*/content: 'PHP Chinese website';
/*Convert to block element*/ display: block; }
ul:before {/*Convert to block element*/display : block;
/*content: url(../html/images/5.jpg);*/
/*content: ''; */
/*The size can only be set if the image is set as the background*/
/*background-image: url(../html/images/5.jpg);*/
/* background-size:100px 100px;*/
/*height: 100px; */
/*width: 100px;*/}
/*:after:at Add elements after the specified element. The default is an inline element, which can be text, image, or even video. */
ul:after {/*content:'www.php.cn';*/
/*color:red;*/}
/*:first-child: Select the first child element in the parent element*/
/*Note: In the current page There is only one ul element, so 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 it */
p:only-child {
/*Among the two divs, only the first one There is only one e388a4556c0f65e1904146cc1a846bee child element in the div, so only the e388a4556c0f65e1904146cc1a846bee*/
/*color:red;*/}
/ in the first div is selected. *only-of-type: Selects the only e388a4556c0f65e1904146cc1a846bee element under the parent element. The difference from only-child is that the type (tag name) of the child element is specified*/
p:only- of-type {
/*Comment out the only-child above first. After execution, you will find that p in the third div will also be selected because it is the only child element with the p type specified. */
color:red;}
The difference between only-child and only-of-type:
1. Common points: both select the only element in the parent element Child element;
2. Difference: only-child does not limit the type of child element, only-of-type: limits the type of child element, such as it must be a p tag
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.伪类选择器</title> </head> <body> <ul> <li id="item1">1</li> <li>2</li> <li class="green red">3</li> <li>4</li> <li>5</li> <li id="item2">6</li> <li>7</li> <li class="php css">8</li> <li>9</li> <li>10</li> </ul> <div> <p>我是当前div元素中的唯一子元素</p> </div> <div> <p>我是当前div元素中的第一个子元素</p> <p>我是当前div元素中的第二个子元素</p> </div> <div> <p>我虽然是div下唯一的类型为p的子元素</p> <h4>我是div下的另一个子元素h4</h4> </div> </body> </html>
The above is the detailed content of css pseudo class selector. For more information, please follow other related articles on the PHP Chinese website!