1. 程式人生 > >H5 常用的選擇器

H5 常用的選擇器

常用的選擇器

1,標籤選擇器:通過標籤的名字進行選擇。

2,class選擇器:通過class屬性的值進行選擇,語法.

3,id選擇器:通過id屬性的值進行選擇,語法#

4,組合選擇器:使用逗號隔開多個選擇器,選擇器的結果進行統一設定。

5,層級選擇器:通過一層一層的元素定位進行選擇,多個層級之間使用空格隔開

6,屬性選擇器:根據元素的屬性進行選擇。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>xuanzeq</title>
        <style>
            /*標籤選擇器*/
            p{
                color: green;
            }
            /*class選擇器*/
            .shige{
                color: darkcyan;
            }
            /*id選擇器*/
            #ge{
                color: brown;
            }
            組合選擇器
            p,.shige,#ge{
                color: blueviolet;
            }
            /*層級選擇器*/
            .box .one{
                color: paleturquoise;
            }
            /*屬性選擇器*/
            input[type=text]{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>相看兩不厭只有敬亭山</p>
        
        <div class="shige">碧雲天黃花地</div>
        <section class="shige">但願人長久千里共嬋娟</section>
        <header class="shige">遙知兄弟登高處,遍插茱萸少一人</header>
        <footer class="shige">會挽雕弓如滿月,西北望,射天狼</footer>
        <header id="ge">佳節又重陽</header>
        <div class="box">
            <div class="one">yi</div>
            <div class="two">er</div>
        </div>
        <div class="one">一二一</div>
        <input type="text" />
        <input type="checkbox" />
        <input type="submit" />
        <input type="button" />
        <input type="password" />

        
    </body>
</html>