1. 程式人生 > >CSS選擇器分類

CSS選擇器分類

CSS選擇器的分類:
1.標籤選擇器(標籤名):作用於當前頁面所有匹配標籤
2.類選擇器(.+屬性):作用於當前頁面所有class值為red的標籤
3.ID選擇器(#+ID名):作用於當前頁面所有ID值為price的標籤,ID在當前頁面具有唯一性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        li{color: blue;
            font-size: 12px}
        .red
{color: red} #price{color: rgba(94, 91, 170, 0.8); font-size: 30px} </style> <title>標籤選擇器</title> </head> <body> <!--標籤選擇器(標籤名):作用於當前頁面所有匹配標籤--> <ul> <li>家用電器</li> <li class="red">各類書籍</li> <li>
手機數碼</li> <li class="red">日用百貨</li> </ul> <!--類選擇器(.+屬性):作用於當前頁面所有class值為red的標籤--> <!--ID選擇器(#+ID名):作用於當前頁面所有ID值為price的標籤,ID在當前頁面具有唯一性--> <p> 限時搶購:電腦 <span id="price">1</span>元起 </p> <ol> <li id="111">有序列表1</li> <
li>有序列表2</li> <li>有序列表3</li> <li>有序列表4</li> </ol> </body> </html>