CSS 结构伪类 以及 其他开发前端知识

76433橘子
276 阅读9分钟

CSS 结构伪类

前端 CSS 学习目录导航

1. CSS 字体属性和文本属性

2. CSS 特性、盒子模型

3. CSS 背景设置、高级元素 form表单使用

4. CSS 结构伪类 以及 其他前端开发知识补充

5. CSS 定位流布局——position

6. CSS 浮动流布局——float

7. CSS 弹性盒布局——flex

8. CSS 形变和动画

9. CSS HTML5拓展 和 CSS函数使用

10. CSS BFC的理解

11. CSS 媒体查询

12. CSS 单位拓展、预处理器、移动端适配方案

CSS 常用结构伪类 其他开发前端知识扩展

  • 结构为类就是实现的是我们选择器的一个升级的写法，方便我们的对一个元素实现精确的实现选择

  • :nth-child(n)

    • 这个时候就可以实现选择对应的第 n 个元素，实现我们的样式的设计

    •     <!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>
        /* 开始使用我们的结构伪类来实现选择子元素中的第三个进行样式的设计 */
        ul li:nth-child(3) {
          color: red;
        }
          
        ul li:nth-child(even) {
          color: skyblue
        }  
      </style>
    </head>
    <body>
      <ul>
        <li>第一个列表元素</li>
        <li>第二个列表元素</li>
        <li>第三个列表元素</li>
        <li>第四个列表元素</li>
        <li>第五个列表元素</li>
        <li>第六个列表元素</li>
        <li>第七个列表元素</li>
        <li>第八个列表元素</li>
      </ul>
    </body>
    </html>

    • 我们的这个选择器是可以直接当作选择器中的一个函数的

      • :nth-child(2n) 【等价于我们的:nth-child(even)】

        • n 就是代表的是我们的正整数
        • 可以实现对相同类型的子元素的一种批量的选择

      • :ntm-child(-n + 5) 就是实现的是选择我们的前面的五个元素

  • :nth-last-child(n)

    • 首先我们的这个选择器实现的选择就是通过的是我们的从后开始选择我们的元素来实现的选择
    • 和nth-child 的用法是一致的
    • :nth-last-child(-n + 3) 这个就是实现的是我们的选择是后面的三个元素

  • nth-of-type(n) <==>：nth-last-of-type

    • 这个选择器就是实现的是我们的只是选择我们的同种类型的元素实现计数，实现对页面的样式的选择
    • 这个时候就可以实现在一托的元素中找到一些异类的元素实现样式的设计
nth-child 和 nth-of-type 的区别：
​
1.nth-child  实现的是我们的选择一个元素中的子元素，但是只不过，是没有那个元素类型的限制的，所以说所有的子元素全部参与选择
​
2.nth-of-type  实现选择子元素的时候，是添加了我们的元素类型的限制的45

CSS 较重要结构伪类

  • :root

    • 就是实现的是对我们的根元素实现选择，就是我们的 HTML 元素，对这个元素实现选择进行CSS 的样式的设计

  • :empty

    • 这个就是实现的是我们的对完全空白的元素进行元素的选择，然后实现对样式的实现设计
:empty {
  width: 100px;
  height: 100px;
  background-color: red;
}
​
:root {
  background-color: skyblue;
  font-size: 30px
}

CSS 否定伪类

  • not(x)

    • 这个就是实现的是选择的是我们的不是一个元素的时候实现选择实现样式的设计

CSS 其他结构伪类

  • :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

    • 就是子元素中出现的这种类型的唯一一个子元素

前端额外知识补充

边框图形（border-image）

  • 我们的边框的实现使用就是通过的是来实现设置我们的盒子的边框
  • 但是有的时候，还是可以通过边框来实现设计我们的一些图形的，这个图形的话，还可以实现图片不掉帧
  • 实际上我们的每一边的边框的话，每一边的区域就是我们的三角形区域
  • 这个时候我们实现设计简单的图形的时候，是可以结合后面的动画来实现的，来实现简单的旋转这些的
  • 一般我们实现设计动画的时候，只要进行确定我们的初始状态个最终的状态，然后来一个动画的过度就可以实现我们的动画的效果了
  •     <!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>
        .box{
          width: 100px;
          height: 100px;
          background-color: skyblue;
          border: 30px solid red;
          border-top: 30px solid blueviolet;
          border-left: 30px solid orange;
          border-bottom: 30px solid yellowgreen;
          box-sizing: border-box;
        }
      </style>
    </head>
    <body>
      <div class="box"></div>
    </body>
    </html>
  • 使用边框可以实现设计的图形

网络字体的使用（web-fonts）

  • 我们之前设计我们的网络字体的时候，是直接通过的我们的 font-family 来实现设计的

  • 但是这个时候，我们是可以直接通过我们的一些方法来实现设计我们的网络字体

  • 默认的我们的网页的字体的使用的时候，我们是直接通过 font-family 来实现的我们的字体的显示

  • 但是这个字体是在我们的操作系统中实现寻找然后使用的

  • 但是有的时候，我们是可以直接通过从服务器中寻找我们的字体来实现给网页实现显示，提供给用户使用

  • 网络字体的使用流程：

    • 1.fonts 从本地获取得到我们想要使用的字体
    • 2.然后在部署服务器的时候，直接将我们的 html/CSS/javascript/img/fonts 实现部署即可，注意我们的字体文件是 .ttf 结尾的

  • 开发人员实现步骤:

    • 1.首先将我们的字体的.ttf 文件实现存放在我们的目录及中，这个目录名的话，一般叫做 fonts
    • 2.然后通过 @font-face 来实现引入字体，并且设置格式
    • 3.最后直接使用字体即可
    • 我们需要注意的是我们的 @font-face 是用来实现加载一个自定义的字体的一个CSS中的函数
    • src 就是实现的是引入资源文件， font-family 就是实现的是为字体实现取名就可以了
    • 网络字体的下载地址

image-20241007162620124.png

  • 网络字体的兼容性问题

    • .ttf 字体格式： TrueType Fonts

    • .otf 字体格式： OpenType Fonts这种字体是建立在我们的ttf 上的一个字体

    • .eot 字体格式： Embedded OpenType Fonts，otf字体的压缩版

    • .svg/.svgz 字体格式： SVG Fonts

    • .woff字体格式： Web Open Font Format web开放字体，建立在ttf字体上的

    • 在不同的浏览器中，可以解析的字体会有所不同，这个时候，我们就要解决这个问题

    • 不同的字体的话，只是为了解决我们的适配性的问题，前端IE 真的讨嫌（IE已死）

    • 实现我们的网络字体的兼容性的具体的写法是：

      • 就在在我们的 src 直接实现引入我们的多个资源文件就可以了

      • url 是来实现的是我们的指定资源的路径

      • format 就是来实现浏览器快速的识别字体的格式

      • 这样的写法可以去了解 Paul lrich(前端大佬)

      • 一般的话，还需要添加的样式的设计的是;

        • font-style:nomal; font-weight:normal

image-20241007165703296.png

字体图标（font-icons）

  • 字体图标和我们的普通的字是一样的，可以直接添加颜色那些的，只是字体图标含有了我们字体和图片两者的优势
  • 字体图标的实现使用 直接实现下载，并且拷贝到需要使用项目即可
  • 这个的使用和我们的 web-fonts 的实现使用的步骤是一致的
  • 一般，我们使用的时候，我们实现使用的 通过我们的 伪元素 :before 实现 样式的设计

前端精灵图（CSS Sprite）

  • 这个是我们的前端的一种图片实现合并的一种技术，就是实现的是将各种的小的图片实现合并到一张图片的过程

  • 实现使用精灵图中的晓得图片的时候，就是通过的我们的 背景的设置来实现的，通过背景的定位来显示对应的图片

    • background-position 来实现我们的寻找到一张精灵图中的小图片的位置，简简单单的，哈哈哈

  • 使用精灵图的好处

    • 减少了网页的 http 的请求的次数，加快了网页的响应速度，减少了服务器压力

      • 原本的应该是进行多次的请求我们的小的图片，但是现在只用请求这个精灵图即可

      • 首先我们这一点的理解：

        • 就是回顾我们的前面的网页的呈现的基本的原理步骤
        • 就是通过我们的 url 资源定位符来实现客户端下载静态资源，然后实现渲染页面
        • 图片越多那么最终的请求下载的资源就会越多，请求次数就随之增多，服务器因为请求次数的增多压力耶变大

    • 减少了图片的总大小

    • 解决的那个图片命名的困扰（这就是为什么喜欢原生开发的原因，全部单文件战神，哈哈，取啥名呀，哈哈哈）

image-20241007174145606.png

前端光标（curcor）

  • 可以实现的就是我们的设置鼠标在元素上面的显示样式

  • 可以实现设置的值含有：

    • auto 浏览器可以根据上下文来自动实现判断光标显示的样式
    • default 默认的样式，系统本身决定
    • pointer 小手样式
  • 这个练习练习就可以了，不用囊个记的
  • curcor: 上面的几个属性值
avatar
文章
阅读
粉丝