css偽類別選擇器
/*元素選擇器*/
ul {
padding: 0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
#}
##ul:after { /*子區塊撐開父區塊*/
content:''; /*在子元素尾部加入空內容元素*/
#display: block; /*並設定為區塊級顯示*/
clear:both; /*清除二邊的浮動*/
/*visibility: none; !*hidden也行*!*/
/*height: 0;*/
/*_height: 1%; !*針對IE*!*/}
li { list -style: none; /*去掉預設清單項目樣式*/
float: left; /*左浮動*/
width: 40px; /*設定寬度*/
height: 40px; /*設定高度*/
line-height: 40px; /*文字垂直居中*/
text-align: center; /*文字水平居中*/
border-radius: 50%; /*設定邊框圓角*/
background: skyblue; /*背景色天藍*/
margin-right: 5px; /*每個球之間的右外邊距*/}
/*:before:在指定選擇器之前插入,預設為行內元素*/
ul:before {/*插入文字*/content: 'PHP中文網';
/*轉為區塊元素*/ display: block; }
ul:before {/*轉為區塊元素*/display : block;
/*content: url(../html/images/5.jpg);*/
/*content: ''; */
#owa
######################################################################################################################################################## 從/*只有將圖片設為背景才可以設定大小*/###### /*background-image: url(../html/images/5.jpg);*/###### /* background-size:100px 100px;*/###### /*height: 100px; */######/*width: 100px;*/}#######/*:after:在指定元素的後面加入元素,預設為行內元素,可以是文字,圖像,甚至影片等*/######ul:after {/*content:'www.php.cn';*/### ###/*color:red;*/}######/*:first-child:選擇父元素中的第一個子元素*/######/*注意:目前頁面中只有一個ul元素,所以可以省略父級ul*/######ul li:first-child {######background-color: brown;}######/*:last- child:選擇父元素中的第一個子元素*/######ul li:last-child {######background-color: lightgreen;}######/*:only -child:選擇是目前父元素中的唯一子元素的元素,IE不支援*/######p:only-child {######/*二div中,只有第一個div中僅有一個
子元素,所有隻選取了第一個div中的
*/######/*color:red;*/}######/ *only-of-type:選擇父元素下的唯一的
元素,與only-child不同之處是指定了子元素的類型(標籤名稱)*/######p:only- of-type {######/*先把上面的only-child註解掉,執行後你會發現,第三個div中的p也會選取,因為它是指定了p類型的唯一子元素*/######color:red;}######only-child和only-of-type的差別:######1.共同點: 都是選擇父元素中的唯一子元素;######2.區別: only-child並不限定子元素的類型,only-of-type:限定了子元素的類型,如必須是p標籤###
<!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>
登入後複製
以上是css偽類選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
