• 【HTML5】【CSS3】CSS3新增知识概述(1)

    CSS3 其实在宏观概念上仍然属于 HTML5，是HTML5对层叠样式表的优化部分

    文章目录

    七、CSS3 属性选择器(上)

    1. 什么是 CSS3

      • 在 CSS2 的基础上拓展、新增的样式

    2. CSS3 发展现状

      • 移动端支持优于 PC 端
      • CSS3 目前还草案，在不断改进中
      • CSS3 相对 H5，应用非常广泛

    3. 属性选择器列表

    4. 属性选择器代码演示

      button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
    八、CSS3 属性选择器(下)

    1. 代码演示

      input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
    九、结构伪类选择器

    1. 属性列表

    2. 代码演示

      ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
    十、nth-child 参数详解

    1. nth-child 详解

      • 注意：本质上就是选中第几个子元素

      • n 可以是数字、关键字、公式

      • n 如果是数字，就是选中第几个

      • 常见的关键字有 even 偶数、odd 奇数

      • 常见的公式如下(如果 n 是公式，则从 0 开始计算)

      • 但是第 0 个元素或者超出了元素的个数会被忽略

    2. 代码演示

      <style>
  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是从第5个开始往后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
    十一、nth-child 和 nt-of-type 的区别

    1. 代码演示

      <style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17

    2. 区别

      • nth-child 选择父元素里面的第几个子元素，不管是第几个类型
      • nt-of-type 选择指定类型的元素
    十二、伪元素选择器

    1. 伪类选择器

    2. 伪类选择器注意事项

      • before 和 after 必须有 content 属性
      • before 在内容前面，after 在内容后面
      • before 和 after 创建的是一个元素，但是属于行内元素
      • 创建出来的元素在 Dom 中查找不到，所以称为伪元素
      • 伪元素和标签选择器一样，权重为 1

    3. 代码演示

      <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
    十三、伪元素的案例

    1. 添加字体图标

      p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
    十四、2D 转换之 translate

    1. 2D 转换

      • 2D 转换是改变标签在二维平面上的位置和形状
      • 移动： translate
      • 旋转： rotate
      • 缩放： scale

    2. translate 语法

      • x 就是 x 轴上水平移动
      • y 就是 y 轴上水平移动
      transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

      • 1
      • 2
      • 3

    3. 重点知识点

      • 2D 的移动主要是指 水平、垂直方向上的移动
      • translate 最大的优点就是不影响其他元素的位置
      • translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
      • 行内标签没有效果

    4. 代码演示

    div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px)
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    十五、让一个盒子水平垂直居中

    注意：绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

    - 看代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. 我们tranlate里面的参数是可以用 % */
            /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
            /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
            /* transform: translateX(50%); */
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
            transform: translate(-50%, -50%);
        }
        
        span {
            /* translate 对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    十六、2D 转换 rotate

    1. rotate 旋转

      • 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

    2. rotate 语法

      /* 单位是：deg */
transform: rotate(度数) 

      • 1
      • 2

    3. 重点知识点

      • rotate 里面跟度数，单位是 deg
      • 角度为正时，顺时针，角度为负时，逆时针
      • 默认旋转的中心点是元素的中心点

    4. 代码演示

      img:hover {
  transform: rotate(360deg)
}

      • 1
      • 2
      • 3
  • 相关阅读:
    antd获取/更改form表单数据（表单域数据）
    visual-studio-code通过跳板机连接远程服务器的配置操作
    【基础篇】七、Flink核心概念
    errno perror stderr 的关系
    操作系统【OS】Ch2 大题 PV题型分类
    pico+unity3d运行测试方法
    网络安全系列-四十一: arkime的docker-compose安装及可视化pcap文件示例
    Redis实现消息队列
    壳聚糖-聚乙二醇-炔基|炔基-PEG-壳聚糖|Chitosan-PEG-Alkyne
    Windows中安装Mysql8.0
  • 原文地址：https://blog.csdn.net/qq_41816702/article/details/125623409