写在前,嵌套(父子),并列(兄弟),上级(父级/其他级别的兄弟),属性(img的src), 内容(文本)
第一例:快速添加class/id 的名字
<!-- div.home -->
<div class="home"></div>
<!-- div#home -->
<div id="home"></div>
<!-- 本例中 div可以是其他标签 -->
第二例:嵌套多级
<!-- div>p -->
<div>
<p></p>
</div>
<!-- div>ul>li*3>img -->
<div>
<ul>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
</div>
<!-- div>ul>li>img*2 -->
<div>
<ul>
<li>
<img src="" alt="">
<img src="" alt="">
</li>
</ul>
</div>
第三例:并列
<!-- dvi+p+ul>li -->
<dvi></dvi>
<p></p>
<ul>
<li></li>
</ul>
第四例:寻找上级或上上级用 ^ ,一层用一个。两层用两个
<!-- div>ul>li*3>p>^^^span -->
<div>
<ul>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
<li>
<p></p>
</li>
</ul>
<span></span>
</div>
第五例:添加属性用 [ ]
<!-- ul+>img[src='a$']*3 -->
<ul>
<li>
<img src="a1" alt="">
<img src="a2" alt="">
<img src="a3" alt="">
</li>
</ul>
第六例:添加信息 { }
<!-- ul>li{这是第$条消息}*3 -->
<ul>
<li>这是第1条消息</li>
<li>这是第2条消息</li>
<li>这是第3条消息</li>
</ul>
<!-- 其中 $ 符是编辑用1到n (多少条) -->
本文地址:https://blog.csdn.net/ITLISHUANG/article/details/107488348
如对本文有疑问, 点击进行留言回复!!
南宁小程序开发,挑战百日学习计划第43天(拖拉登录框的写法)
让盒子水平居中解决方法!!!---(块元素,行内元素,行内块,文本)
CSS踩坑-------transform:scale(‘数字’)
网友评论