<!DOCTYPE html><html><head><meta charset="UTF-8"><title>1.基本選取器</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標識符只允許用一次*/
#item1 {/*background-color: red;*/}
/*類別選取器:選擇頁面中具有同一類樣式的全部元素*/
.green {/*background-color: lightgreen;*/}
/*父子選取器:元素之間是層級的關係,所選元素有共同的父級*/
ul li { /*層級關係用空格表示*/color: white;}
/*通配選取器:選擇指定父級下面的所有層級的元素*/
ul * {/*border: 1px solid black;*/}
/*子項目選取器 >: 選擇父元素下所有的li元素,等價於標籤選取器,所以它的優先順序低於class,id*/
ul > li { /*等價於: ul > * {} *//*background-color: blue;*/}
/*相鄰兄弟選取器 +:僅選擇相對於它後面的第一個兄弟節點 */
#item2 + li {/*background-color: black; /*只有第7個小球變黑*/*/}
/*全部兄弟選取器 ~ :選擇相對於它後面的全部兄弟節點 */
#item2 ~ li {/*background-color: coral; /*亮橙色*/*/}</style></head><body><ul><li id="item1">1</li><li>2</li><li>3</li><li class="">4</li><li>5</li><li id="item2">6</li><li>7</li><li>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
