zoukankan      html  css  js  c++  java
  • 网页开发学习笔记三: HTML选择器

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

    • 标签选择器  标签{属性: 值; 属性:值;}
    <!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){属性: 值}
      • 特点:  既要满足使用了某个标签, 还要满足使用了类(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>
  • 相关阅读:
    分布式哈希和一致性哈希算法
    消息队列rabbitmq的五种工作模式(go语言版本)
    Mysql查询缓存
    数据库的三大设计范式
    二叉树的常见算法
    消息队列选型分析
    Mysql防止索引失效原则
    Mysql索引优化单表、两表、三表实践
    数据结构 【栈与队列】
    谷歌实用插件
  • 原文地址:https://www.cnblogs.com/fanxiaocong/p/6443919.html
Copyright © 2011-2022 走看看