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>

猜你喜欢

转载自blog.csdn.net/qq_42467563/article/details/83107511