首页 > 代码库 > 网页开发学习笔记三: HTML选择器

网页开发学习笔记三: HTML选择器

2024-09-06 01:52:07   221人阅读

选择器是一个选择标签的过程

  • 标签选择器　　标签{属性: 值; 属性:值;}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
     /*样式表内容 */
        div{
            font-size: 50px;
            color: orange;
            background-color: rgb(0, 1, 0);
            width: 300px;
            height: 200px;
        }

        p{
            font-size: 20px;
            color: #00ffff;
        }
    </style>

</head>

<body>
 
    <div>AAAAA</div>
    <div>BBBBB</div>

    <p>CCCCC</p>
    <p>DDDDD</p>

    <div>AAAAA</div>

</body>
</html>

 

  • 类选择器　　.自定义类名{属性: 值; 属性: 值}
    • 特点:   谁调用, 谁生效
      • 一个标签只可以调用多个类选择器
      • 多个标签可以调用同一个类选择器
    • 类选择器的命名规则
      • 不能使用数字开头
      • 不能使用特殊符号或者特殊符号开头( _ 除外 ) 来定义类名
      • 不建议使用汉字来命名.
      • 不建议使用属性或者属性的值来定义类名
<!DOCTYPE html>
<html>
<head>
    <title>Doucment</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            font-size: 40px;
            color: #ff0000;
            background-color: rgb(255, 222, 111);
            width: 400px;
            height: 200px;
        }

        .miss{
            text-indent: 2em;
            text-align: right;
        }

        .G{
            font-size: 200px;
            color: blue;

        }

        .o1{
            font-size: 200px;
            color: #990000;
        }

        .o2{
            font-size: 200px;
            color: orange;
        }

        .g{
            font-size: 200px;
            color: blue;
        }

        .l{
            font-size: 200px;
            color: #009900;
        }

        .e{
            font-size: 200px;
            color: orange;
        }
    </style>
</head>
<body>

    <div class="box miss">AAAAA</div>
    <div>BBBBB</div>

    <p class="box">CCCCC</p>
    <p>DDDDD</p>

    <span class="box">EEEEE</span>

    <br>
    <br>
    <br>

    <span class="G">G</span>
    <span class="o1">o</span>
    <span class="o2">o</span>
    <span class="g">g</span>
    <span class="l">l</span>
    <span class="e">e</span>

</body>
</html>

 

  • ID 选择器　　#自定义名称{属性: 值; 属性: 值}
    • 特点
      • 一个 ID 选择器在一个页面只能使用一次, 如果使用 2 次或者 3 次以上, 不符合 w3c 规范, JS 调用会出问题
      • 一个标签只能调用一个 ID 选择器
      • 一个标签只可以同时调用类选择器和 ID 选择器
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            font-size: 40px;
            color: rgb(0, 0, 255);
            background-color: rgb(255, 255, 0);
        }

        #miss{
            text-align: center;
        }

        .box{
            text-indent: 2em;
        }
    </style>
</head>
<body>

    <div id="box" class="box">AAAAA</div>
    <div>BBBBB</div>

    <p>CCCCC</p>
    <p>DDDDD</p>

</body>
</html>

 

  • 通配符选择器(不推荐使用)　　*{属性: 值; 属性: 值}
    • 特点:  给所有的标签都使用相同的样式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">

        *{
            font-size: 100px;
            color: red;
            
        }
        
    </style>
</head>
<body>

    <div>AAAAA</div>
    <div>BBBBB</div>

    <p>CCCCC</p>
    <p>DDDDD</p>

    <span>EEEEE</span>


</body>
</html>

 

 

  • 交集选择器　　标签(选择器) + 选择器{属性: 值}
    • 特点:  既要满足使用了标签(选择器), 还要满足使用了类(ID)选择器
<head>
    <meta charset="utf-8">
    <title></title>

    <style type="text/css">
        .box{
            font-size: 50px;
        }

        div.box{
            color: red;
        }

        #miss{
            color: orange;
        }

        div#miss{
            width: 400px;
            height: 300px;
            background-color: green;
        }

        .box#miss{
            width: 400px;
            height: 400px;
            background-color: orange;
        }
    </style>
</head>
<body>

    <div class="box" id="miss">AAAAA</div>

    <p class="box">BBBBB</p>

    <div id="miss">CCCCC</div>

</body>
</html>

 

 

  • 后代选择器　　选择器(标签) + 空格 + 选择器(标签){属性: 值}
    • 特点:  可以无限次隔代  只要能代表标签, 标签 类选择器 ID
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            font-size: 40px;
            color: red;
        }

        div p span{
            font-size: 50px;
        }

        .box span{
            background-color: blue;
        }

        .box .miss{
            color: red;
        }
    </style>
</head>
<body>

    <div class="box">
        <p>
            <span class="miss">AAAAA</span>
        </p>
    </div>


    <div class="box">
        <span>BBBBB</span>
    </div>

</body>
</html>

 

 

  • 子代选择器　　选择器>选择器{属性: 值}
    • 特点:  选中的直接下一代元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        div>span{
            color: red;
            font-size: 40px;
        }

        p>span{
            color: green;
            font-size: 40px;
        }
        
    </style>
</head>
<body>

    <div>
        <p>
            <span>AAAAA</span>
        </p>

        <span>BBBBB</span>
    </div>

</body>
</html>

 

 

  • 并集选择器　　选择器,选择器,选择器{属性: 值} 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box,#miss,span,h1{
            font-size: 100px;
            color: #fff;
            background-color: green;
        }
    </style>
</head>
<body>

    <div class="box">AAAAA</div>

    <p id="miss">BBBBB</p>

    <span>CCCCC</span>

    <h1>DDDDD</h1>

</body>
</html>

 

网页开发学习笔记三: HTML选择器


联系
我们