/*元素選取器*/
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: 'topic.alibabacloud.com';
/*轉為塊元素*/ display: block; }
ul:before {/*轉為塊元素*/display: block;
/*content: url(../html/images/5.jpg);*/
/*content: ''; */
/*只有將圖片設定為背景才可以設定大小*/
/*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中僅有一個<p>子項目,所有只選中了第一個div中的<p>*/
/*color:red;*/}
/*only-of-type:選擇父元素下的唯一的<p>元素,與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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
