美文网首页CSS
css 通过css选择器快速生成html结构

css 通过css选择器快速生成html结构

作者: 暴躁程序员 | 来源:发表于2023-03-27 10:23 被阅读0次

    一、生成单个标签

    <!-- div + 回车 -->
    <div></div>
    
    <!-- .wrap + 回车  -->
    <div class="wrap"></div>
    
    <!-- p.content1 + 回车 -->
    <p class="content1"></p>
    
    <!-- #id + 回车 -->
    <div id="id"></div>
    
    <!-- .wrap{hello world} + 回车 -->
    <div class="wrap">hello world</div>
    
    <!-- .wrap.main + 回车 -->
    <div class="wrap main"></div>
    
    <!-- #id.wrap + 回车 -->
    <div id="id" class="wrap"></div>
    

    二、生成多个标签

    1. 生成同级标签
    <!-- div*2 + 回车 -->
    <div></div>
    <div></div>
    
    <!-- .item$*2 + 回车 -->
    <div class="item1"></div>
    <div class="item2"></div>
    
    <!-- .item$*2{$$$号} + 回车 -->
    <div class="item1">001号</div>
    <div class="item2">002号</div>
    
    <!-- .username+.password + 回车 -->
    <div class="username"></div>
    <div class="password"></div>
    
    1. 生成嵌套标签
    <!-- ul>li*2 + 回车 -->
    <ul>
        <li></li>
        <li></li>
    </ul>
    
    <!-- .username>input + 回车 -->
    <div class="username">
        <input type="text">
    </div>
    
    <!-- .main>p.content*2{张三$} + 回车 -->
    <div class="main">
        <p class="content">张三1</p>
        <p class="content">张三2</p>
    </div>
    
    <!-- (.username>input)+.password>input + 回车 -->
    <div class="username"><input type="text"></div>
    <div class="password"><input type="text"></div>
    
    <!-- .login>(.username>input)+.password>input + 回车 -->
    <div class="login">
        <div class="username"><input type="text"></div>
        <div class="password"><input type="text"></div>
    </div>
    

    相关文章

      网友评论

        本文标题:css 通过css选择器快速生成html结构

        本文链接:https://www.haomeiwen.com/subject/pyxzrdtx.html