<!DOCTYPE html><html><head><meta charset="UTF-8"><title>2.屬性選取器</title><style type="text/css">
/*元素選取器*/
ul { padding: 0;margin: 0;width: 450px;border: 1px dashed #666;padding: 10px 5px;}ul:after { /*子塊撐開父塊*/content:''; /*在子項目尾部添加空內容元素*/display: block; /*並設定為塊級顯示*/clear:both; /*清除二邊的浮動*/}li { list-style: none; /*去掉預設清單項目樣式*/float: left; /*左浮動*/width: 40px; /*設定寬度*/height: 40px; /*設定高度*/line-height: 40px; /*文本垂直置中*/text-align: center; /*文本水平置中*/border-radius: 50%; /*設定邊框圓角*/background: skyblue; /*背景色天藍*/margin-right: 5px; /*每個球之間的右外邊距*/}
/*根據屬性名稱來選擇:例如id屬性*/
*[id] { /*等價於: li[id]*//*background-color: red;*/}
/*根據屬性名稱與值來選擇:例如選擇class="green"的元素*/
li[class="green"] {/*background-color: lightgreen;*/}
/*選擇class屬性值中包括指定單詞的元素*/
li[class ~= "red"] {background-color: brown;}
/*選擇以'ph'字母開頭的class類樣式元素*/
li[class ^= "ph"] {background-color: coral;}
/*選擇以's'結尾的類樣式元素*/
li[class $= "s"] {background-color: lime; /*青綠*/}
/*選擇屬性值中包括指定字母'e'的類樣式元素:;*/
li[class *= "e"] {background-color: yellowgreen; /*234背景為黃綠色*/}</style></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></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
