CSS

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

2023-03-27  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读