前端学习第六天~

最新推荐文章于 2024-07-24 23:00:08 发布

小歌的学习日常

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量63

点赞数

文章标签：前端学习 css html html5

本文链接：https://blog.csdn.net/m0_59060850/article/details/128950755

版权

1.Emmet语法

Emmet语法的前身是Zen coding,它使用缩写，来提高html、css的编写速度，Vscode内部已经集成了该语法。

1.1快速生成HTML结构语法

1.生成标签：标签名，再按tab键。

2.生成多个相同标签，加上*即可，例如3个div，就输入div*3即可

3.父子级标签，用>,例如ul>li

4.兄弟标签，用+，例如div+p

5.生成带有类名或者id名字的标签，直接写.demo或#two tab键即可,例如p.one,就会生成<p class="one"></p>

6.生成div有顺序，可采用$,例如.demo*5

1.2快速生成CSS

简写tab键即可。

1.3格式化代码

右键格式化文档

2.CSS的复合选择器

2.1什么是复合选择器

在CSS中，可以根据选择器类型将其分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成。

常见复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

2.2后代选择器（重要）

后代选择器又称为包含选择器，可以选择父类元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分开。当标签发生嵌套时，内层标签就成为外层标签的后代。

例子：

<!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>选择器</title>
    <style>
        ol li {
            color: pink ;
        }
    </style>
</head>
<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
    </ol>

    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>

</body>
</html>

语法：

元素1 元素2 {样式}
表示选择元素1中的所有元素2

<ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>

<ul>
        <li>我是ul的孩子哈</li>
        <li>我是ul的孩子哈</li>
        <li>我是ul的孩子哈</li>
    </ul>

这种情况应当给ul class做一区分

.new li {
color: pink;
}


...


<ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>

<ul class="new">
        <li>我是ul的孩子哈</li>
        <li>我是ul的孩子哈</li>
        <li>我是ul的孩子哈</li>
    </ul>

才可成功实现：