Emmet语法和结构伪类

最新推荐文章于 2024-04-26 01:26:41 发布

DustinWangq

最新推荐文章于 2024-04-26 01:26:41 发布

阅读量123

点赞数

分类专栏： # HTML-CSS 文章标签： css

本文链接：https://blog.csdn.net/Welitsi/article/details/132208013

版权

HTML-CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、认识Emmet

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.

在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低.
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码

!和html:5可以快速生成完整结构的html5代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

二、常见Emmet语法

1.`>`(子代)和`+`(兄弟)

在这里插入图片描述

2.`*`（多个）和`^`（上一级）

在这里插入图片描述

3.() 分组

在这里插入图片描述

4.属性(id属性、class属性、普通属性) `{}`（内容）

在这里插入图片描述

5.`$`（数字）

在这里插入图片描述

6.隐式标签

在这里插入图片描述

7.CSS Emmet

在这里插入图片描述

三、常见的结构伪类

1.结构伪类 - :nth-child

◼ :nth-child(1)

是父元素中的第1个子元素

◼ :nth-child(2n)

n代表任意正整数和0
是父元素中的第偶数个子元素（第2、4、6、8…个）
跟:nth-child(even)同义

◼ :nth-child(2n + 1)

n代表任意正整数和0
是父元素中的第奇数个子元素（第1、3、5、7…个）
跟:nth-child(odd)同义

◼ :nth-child(-n + 2)

代表前2个子元素

2.结构伪类 - :nth-last-child( ) 、:nth-of-type( )、:nth-last-of-type( )

◼ :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数

:nth-last-child(1)，代表倒数第一个子元素
:nth-last-child(-n + 2)，代表最后2个子元素

◼ :nth-of-type()用法跟:nth-child()类似

不同点是:nth-of-type()计数时只计算同种类型的元素

◼ :nth-last-of-type()用法跟:nth-of-type()类似

不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

3.其他伪类

◼ 其他常见的伪类(了解):

:first-child，等同于:nth-child(1)
:last-child，等同于:nth-last-child(1)
:first-of-type，等同于:nth-of-type(1)
:last-of-type，等同于:nth-last-of-type(1)
:only-child，是父元素中唯一的子元素
:only-of-type，是父元素中唯一的这种类型的子元素

◼ 下面的伪类偶尔会使用:

:root，根元素，就是HTML元素
:empty 代表里面完全空白的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 结构伪类用法示例 */
    /* nth-child() /nth-last-child()*/
    /* 第一个子元素 */
    table tr td:nth-child(1) {
      font-size: 15px;
    }
    /* 前2个子元素 */
    table tr td:nth-child(-n+2) {
      color: aqua;
    }
    /* 偶数行even 奇数行odd */
    table tr:nth-last-child(even) {
      background-color: chocolate;
    }

    /* nth-of-type */
    dl dt:nth-of-type(-n+2) {
      font-weight: bold;
    }
    /* dl dt:nth-child(-n+2) {
      font-weight: bold;
    } */

    /* :root */
    :root {
      margin: 0;
      padding: 0;
    }
    :empty {
      width: 10px;
      height: 10px;
      display: inline-block;
      background-color: green;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>English1</td>
      <td>English2</td>
      <td>English3</td>
      <td>English4</td>
      <td>English5</td>
    </tr>
    <tr>
      <td>English1</td>
      <td>English2</td>
      <td>English3</td>
      <td>English4</td>
      <td>English5</td>
    </tr>
    <tr>
      <td>English1</td>
      <td>English2</td>
      <td>English3</td>
      <td>English4</td>
      <td>English5</td>
    </tr>
    <tr>
      <td>English1</td>
      <td>English2</td>
      <td>English3</td>
      <td>English4</td>
      <td>English5</td>
    </tr>
    <tr>
      <td>English1</td>
      <td>English2</td>
      <td>English3</td>
      <td>English4</td>
      <td>English5</td>
    </tr>
  </table>
  <dl>
    <span></span>
    <dt>我是小标题</dt>
    <dd>我是内容</dd>
    <dd>我是内容</dd>
    <dd>我是内容</dd>
    <dt>我是小标题</dt>
    <dd>我是内容</dd>
    <dd>我是内容</dd>
    <dd>我是内容</dd>
    <dt>我是小标题</dt>
    <dd>我是内容</dd>
    <dd>我是内容</dd>
    <dd>我是内容</dd>
  </dl>
</body>
</html>

四、否定伪类的使用

1.否定伪类（negation pseudo-class)

◼ :not() 的格式是 :not(x)

x 是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）

◼ :not(x) 表示除x以外的元素

<!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>Document</title>
  <style>
    /* .item {
      color: red;
    } */

    .box :not(.why) {
      color: blue;
    }
  </style>
</head>
<body>

  <div class="box">
    <div class="item">列表内容1</div>
    <div class="item">列表内容2</div>
    <div class="why">列表内容3</div>
    <div class="item">列表内容4</div>
    <div class="item">列表内容5</div>
    <div>列表内容5</div>
    <div>列表内容5</div>
    <div>列表内容5</div>
  </div>

</body>
</html>