你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

CSS基础学习——Emmet 语法&复合选择器_css emmet

作者：你好赵伟 | 2024-05-06 10:44:26

踩

css emmet

学习内容

1.Emmet 语法

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

1.1 快速生成HTML结构语法

1.2 快速生成CSS样式语法

1.3 快速格式化代码

Vscode 快速格式化代码：shift+alt+f

也可以设置当我们 保存页面的时候自动格式化代码：

点击左下角的【设置】→搜索 format→勾选【Editor: Format On Save】

2. CSS的复合选择器

2.1 什么是复合选择器

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

复合选择器可以更准确、更高效的选择目标元素（标签）

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

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

2.2 后代选择器（重要）

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

语法：

元素1 元素2 {样式声明}

上述语法表示选择元素1里面的所有元素2（后代元素）。

元素1和元素2中间用空格隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

元素1和元素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选出来改为pink */
        ol li {
            color: pink;
        }
 
        ol li a {
            color: red;
        }
 
        .nav li a {
            color: brown;
        }
    </style>
</head>
 
<body>
    <ol>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li><a href="#">我是ol的孙子</a></li>
    </ol>
    <ul>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li><a href="#">我是ul的孙子</a></li>
    </ul>
    <ul class="nav">
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li><a href="#">我是ul的孙子</a></li>
        <li><a href="#">我是ul的孙子</a></li>
        <li><a href="#">我是ul的孙子</a></li>
    </ul>
</body>
 
</html>

2.3 子选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法：

元素1>元素2 {样式声明}

上述语法表示选择元素1里面的所有直接后代（子元素）元素2.

元素1和元素2中间用大于号隔开

元素1是父级，元素2是子级，最终选择的是元素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>
        .nav>a {
            color: red;
        }
    </style>
</head>
 
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>
 
</html>

2.4 并集选择器（重要)

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1，元素2 {样式声明}

上述语法表示选择元素1和元素2.

元素1和元素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>
        /* 要求1：请把熊大和熊二改为粉色 */
        div,
        p {
            color: pink;
        }
 
        /* 要求2：请把熊大和熊二改为粉色，会有小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
        /* 约定的语法规范，我们并集选择器喜欢竖着写 */
        /* 一定要注意最后一个选择器不需要加逗号 */
    </style>
</head>
 
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>
 
</html>

2.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示。

伪类选择器有很多，比如链接伪类、结构伪类等，这里只解释常用的链接伪类选择器。

2.5.1 链接伪类选择器


<!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>
        /* 1.未访问的链接 a:link 把没有点击过（访问过）的链接选出来*/
        a:link {
            color: #333;
            text-decoration: none;
        }
 
        /* 2. a:visited 选择点击过的（访问过的）链接 */
        a:visited {
            color: orange;
        }
 
        /* 3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }
 
        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>
 
<body>
    <a href="#" target="_blank">小猪佩奇</a>
</body>
 
</html>

链接伪类选择器注意事项：

1.为了确保生效，请按照LVHA的顺序声明:link :visited :hover :active

2.记忆法：love hate 或者 lv 包包 hao。

3.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法：

/* a 是标签选择器选择出所有的链接 */

a {

color: gray;

text-decoration: none;

}

/* :hover 是链接伪类选择器鼠标经过 */

a:hover {

color: red;

text-decoration: underline;

/* 鼠标经过时由原来的无下划线且为灰色变成了有下划线且为红色 */

}

2.7 :focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

input: focus {

background-color: yellow;

}


<!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>focus选择器</title>
    <style>
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>
 
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
 
</html>

2.8 复合选择器总结

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/543812