2022-01-28总结 CSS复合选择器

是小南宫吖

已于 2022-01-28 23:03:21 修改

阅读量267

点赞数

分类专栏：前端学习文章标签： p2p linq gnu

于 2022-01-28 22:44:12 首次发布

本文链接：https://blog.csdn.net/m0_46614565/article/details/122737081

版权

本文详细介绍了CSS中的复合选择器，包括后代选择器、子选择器、并集选择器和伪类选择器，结合Emmet语法提高HTML/CSS编写效率。重点讲解了后代选择器和子选择器的区别，并提供了实用的示例。

摘要由CSDN通过智能技术生成

1.Emmet语法

Emmet语法的前身是Zen coding，它使用缩写，来提高HTML/css的编写速度，VSCode内部已经集成该语法。

1.1 快速生成HTML结构语法

1.新建html页面，输入感叹号“!”，再按Tab键即可生成骨架。

2.生成标签直接输入标签名，按Tab键即可

3.如果想要生成多个相同的标签，加上*即可。比如 div*3 可以快速生成3个div

4.如果有父子级关系的标签，可用 > 比如 ul>li

5.如果有兄弟关系的标签，用 + 比如 div+p

6.如果生成带有类名或者id名字的，直接写 .demo（类）或者 #two（id）再按Tab键即可

7.如果生成的div类名是有顺序的，可以用自增符号$

8.如果想要在生成的标签内部写内容，可以用{}表示。比如 div{文字}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emmet语法快速生成html标签和样式</title>
</head>

<body>
    <!-- 1.生成标签，直接输入标签名，按Tab键即可 -->
    <div></div>
    <table></table>

    <!-- 2.生成多个相同标签  例如div*3，按Tab键生成3个div -->
    <div></div>
    <div></div>
    <div></div>


    <!-- 3.有父子级关系的标签，可以用>  例如 ul>li，按Tab键 -->
    <ul>
        <li></li>
    </ul>
    <!-- div>span -->
    <div><span></span></div>

    <!-- 4.有兄弟关系的标签，比如div+ -->
    <div></div>
    <p></p>

    <!-- 5.如果生成带有类名或者id名字的，直接写.demo或者#two 按Tab即可 -->
    <!-- 带.是类
        导航栏叫nav是div的，<div class="nav"></div> 现在用.nav 按Tab键 -->
    <div class="nav"></div>

    <!-- #banner  带#是id -->
    <div id="banner"></div>

    <!-- 默认是div生成的，想要是别的标签生成的，加约束即可。如p.one -->
    <p class="one"></p>
    <!-- span.gray 按Tab键-->
    <span class="gray"></span>

    <!-- ul>li#two 按Tab键-->
    <ul>
        <li id="two"></li>
    </ul>

    <!-- 6.如果生成的div类名是有顺序的，可以用自增符号$ -->
    <!-- .demo$*5 -->
    <!-- 若是.demo*5,则生成5个都是class="demo"的div -->
    <!-- .demo 生成一个div叫class="demo", $符号默认排序从1开始，*5说明有5个div-->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>


    <!-- 7.如果想要在生成的标签内部写内容可以用{}表示 -->
    <!-- 我们想生成的标签里面默认显示几个文字 -->
    <!-- div{pink老师} -->
    <div>pink老师</div>

    <!-- div{天天天蓝}*5 -->
    <div>天天天蓝</div>
    <div>天天天蓝</div>
    <div>天天天蓝</div>
    <div>天天天蓝</div>
    <div>天天天蓝</div>

    <!-- div{$}*5 -->
    <!-- 效果：写5个

最低0.47元/天解锁文章

是小南宫吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022-01-28总结 CSS复合选择器

1.Emmet语法 Emmet语法的前身是Zen coding，它使用缩写，来提高HTML/css的编写速度，VSCode内部已经集成该语法。1.1 快速生成HTML结构语法 1.新建html页面，输入“!”，再按Tab键即可生成骨架。 2.生成标签直接输入标签名，按Tab键即可 3.如果想要生成多个相同的标签，加上*即可。比如 div*3 可以快速生成3个div 4.如果有父子级关系的标签，可用...
复制链接

扫一扫