css pseudo class selector-CSS Tutorial-php.cn

css pseudo class selector

无忌哥哥

Release： 2018-06-28 17:16:14

Original

1890 people have browsed it

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

child element in the div, so only the

/*color:red;*/}

/ in the first div is selected. *only-of-type: Selects the only

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>

Copy after login

The above is the detailed content of css pseudo class selector. For more information, please follow other related articles on the PHP Chinese website!