css偽類選擇器-css教學-PHP中文網

首頁

web前端

css教學

css偽類選擇器

无忌哥哥

Jun 28, 2018 pm 05:16 PM

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 id="我是div下的另一个子元素h">我是div下的另一个子元素h4</h4>
</div>
</body>
</html>

以上是css偽類選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn