07CSS笔记——CSS3、属性选择器、结构伪类选择器、伪元素选择器

embedded/2025/3/4 14:00:26/

文章目录

    • 一、CSS3 的现状
    • 二、CSS3 新增选择器
    • 三、属性选择器
    • 四、结构伪类选择器
      • 1.E:first-child
      • 2.E:nth-child(n)
      • 3.E:nth-child 与 E:nth-of-type 的区别
      • 4.小结
    • 五、伪元素选择器
    • 六、盒子模型
    • 七、其他特性
      • 1.图标变模糊 -- CSS3滤镜filter
      • 2.计算盒子宽度 -- calc 函数
      • 3.CSS3 过渡

一、CSS3 的现状

  • 新增的CSS3特性有兼容性问题，ie9+才支持
  • 移动端支持优于 PC 端
  • 不断改进中
  • 应用相对广泛
  • 现阶段主要学习：新增选择器和盒子模型以及其他特性

二、CSS3 新增选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

  • 属性选择器
  • 结构伪类选择器
  • 伪元素选择器

三、属性选择器

属性选择器，按照字面意思，都是根据标签中的属性来选择元素

选择符简介
E[att]选择具有att属性的E元素
E[att=“val”]选择具有att属性且属性值等于val的E元素
E[att^=“val”]匹配具有att 属性且值以val开头的E元素
E[att$=“val”]匹配具有att ,属性且值以val结尾的E元素
E[att*=“val”]匹配具有att ,属性且值中含有val的E元素

示例代码：

css"> /* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {color: red;
}
/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$=data] {color: blue;
}
  • 属性选择器，按照字面意思，都是根据标签中的属性来选择元素
  • 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
  • 属性选择器也可以选择出来自定义的属性
  • **注意：**类选择器、属性选择器、伪类选择器，权重为 10。

四、结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素

选择符简介
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个E元素
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后—个
E:nth-of-type(n)指定类型E的第n个

区别:

  1. nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
  2. nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

1.E:first-child

匹配父元素的第一个子元素E

 <style>css">ul li:first-child{background-color: red;}</style><ul><li>列表项一</li><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>

E:last-child 则是选择到了最后一个li标签

2.E:nth-child(n)

匹配到父元素的第n个元素

  • 匹配到父元素的第2个子元素

    ul li:nth-child(2){}

  • 匹配到父元素的序号为奇数的子元素

    ul li:nth-child(odd){} odd 是关键字 奇数的意思（3个字母 ）

  • 匹配到父元素的序号为偶数的子元素

    ul li:nth-child(even){} even（4个字母 ）

  • 匹配到父元素的前3个子元素

    ul li:nth-child(-n+3){}

    选择器中的 n 是怎么变化的呢？

    因为 n是从 0 ，1，2，3… 一直递增

    所以 -n+3 就变成了

    • n=0 时 -0+3=3
    • n=1时 -1+3=2
    • n=2时 -2+3=1
    • n=3时 -3+3=0
    • …

一些常用的公式： 公式不是死的，在这里列举出来让大家能够找寻到这个模式，能够理解代码，这样才能写出满足自己功能需求的代码

  • nth-child ( n )选择某个父元素的一个或多个特定的子元素（重点）

  • n可以是数字，关键字和公式

  • n 如果是数字，就是选择第n个子元素，里面数字从1开始…n可以是关键字:even偶数，odd奇数

  • n可以是公式︰常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)

公式取值
2n偶数
2n+1奇数
5n5 10 15…
n+5从第5个开始（(包含第五个)到最后
-n+5前5个(包含第5个) …

常用的结构伪类选择器是： nth-child(n) {...}

3.E:nth-child 与 E:nth-of-type 的区别

这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可

<style>css">ul li:nth-child(2){/* 字体变成红色 */color: red;}ul li:nth-of-type(2){/* 背景变成绿色 */background-color: green;}</style><ul><li>列表项一</li><p>乱来的p标签</p><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>

也就是说：

  • E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
  • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子

4.小结

  • 结构伪类选择器一般用于选择父级里面的第几个孩子
  • nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
  • nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
  • 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式
  • 如果是无序列表，我们肯定用 nth-child 更多
  • 类选择器、属性选择器、伪类选择器，权重为 10

五、伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符简介
:before在元素内部的前面插入内容
:after在元素内部的后面插入内容

示例demo

<style>css">div {width: 200px;height: 200px;background-color: pink;}/* div::before 权重是2 */div::before {/* 这个content是必须要写的 */content: '我';}div::after {content: '小猪佩奇';}
</style>
<body><div>是</div>
</body>

注意：

  • before 和 after 创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法： element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
    伪元素选择器和标签选择器一样，权重为 1

应用场景一： 字体图标

在实际工作中，字体图标基本上都是用伪元素来实现的，好处在于我们不需要在结构中额外去定义字体图标的标签，通过content属性来设置字体图标的 编码

步骤：

  • 结构中定义div盒子
  • 在style中先申明字体 @font-face
  • 在style中定义after伪元素 div::after{…}
  • 在after伪元素中 设置content属性，属性的值就是字体编码
  • 在after伪元素中 设置font-family的属性
  • 利用定位的方式，让伪元素定位到相应的位置；记住定位口诀：子绝父相
<head>...<style>css">@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?1lv3na');src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?1lv3na') format('truetype'),url('fonts/icomoon.woff?1lv3na') format('woff'),url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {position: absolute;top: 10px;right: 10px;font-family: 'icomoon';/* content: ''; */content: '\e91e';color: red;font-size: 18px;}</style>
</head>
<body><div></div>
</body>

应用场景二： 仿土豆效果

把之前的代码进行了改善

步骤：

  • 找到之前写过的仿土豆的结构和样式，拷贝到自己的页面中
  • 删除之前的mask遮罩
  • 在style中，给大的div盒子（类名叫tudou的），设置 before伪元素
  • 这个伪元素充当的是遮罩的角色，所以我们不用设置内容，但是需要设置content属性，属性的值为空字符串
  • 给这个遮罩设置宽高，背景颜色，默认是隐藏的
  • 当鼠标移入到 div盒子时候，让遮罩显示，利用 hover 来实现
<head>...<style>css">.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.tudou::before {content: '';/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}/* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */.tudou:hover::before {/* 而是显示元素 */display: block;}</style>
</head><body><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div><div class="tudou"><img src="images/tudou.jpg" alt=""></div>
</body>

六、盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变

可以分成两种情况：

  • box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
  • box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

七、其他特性

1.图标变模糊 – CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

语法：

css">filter:   函数(); -->  例如： filter: blur(5px);  -->  blur模糊处理  数值越大越模糊

在这里插入图片描述

2.计算盒子宽度 – calc 函数

calc() 此CSS函数让你在声明CSS属性值时执行一些计算

语法：

css">width: calc(100% - 80px);

括号里面可以使用 + - * / 来进行计算

3.CSS3 过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。

我们现在经常和 :hover 一起 搭配使用。

语法：

css">transition: 要过渡的属性  花费时间  运动曲线  何时开始;
  • 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
  • 花费时间： 单位是 秒（必须写单位） 比如 0.5s
  • 运动曲线： 默认是 ease （可以省略）
  • 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
  • 后面两个属性可以省略
  • 记住过渡的使用口诀： 谁做过渡给谁加

在这里插入图片描述


http://www.ppmy.cn/embedded/169930.html

相关文章

【leetcode100】全排列

【leetcode100】全排列

1、题目描述 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 2、先验知识 2.1 回溯算法 …
阅读更多...
SpringBoot项目中替换指定版本的tomcat

SpringBoot项目中替换指定版本的tomcat

在Spring Boot项目中替换指定版本的Tomcat&#xff0c;可以通过修改项目的pom.xml文件来实现。具体步骤如下&#xff1a; 首先&#xff0c;查看当前Spring Boot项目中使用的Tomcat版本。可以通过查看pom.xml文件中的依赖项来确定。 在pom.xml文件中&#xff0c;找到Spring Bo…
阅读更多...
MySQL -操作

MySQL -操作

博客主页&#xff1a;【夜泉_ly】 本文专栏&#xff1a;【暂无】 欢迎点赞&#x1f44d;收藏⭐关注❤️ 文章目录 创建数据库格式编码集 操控数据库查看数据库修改数据库删除数据库备份与还原 部分表操作创建表查看表修改表 我的版本号&#xff1a;8.0.41-0ubuntu0.22.04.1 创…
阅读更多...
探索Elasticsearch：文档的CRUD

探索Elasticsearch：文档的CRUD

在企业环境中&#xff0c;Elasticsearch对文档操作的支持不仅是实现高效搜索的关键&#xff0c;更是数据驱动决策的重要支柱。它通过强大的索引机制和灵活的查询语言&#xff0c;使企业能够实时处理和分析海量文档数据&#xff0c;迅速获取有价值的洞察&#xff0c;从而加速创新…
阅读更多...
DataWorks (数据工厂)介绍

DataWorks (数据工厂)介绍

介绍 DataWorks 是阿里云推出的一体化大数据开发与治理平台&#xff0c;曾用名"数据工厂""大数据开发套件" 最新版本是3.0 它是一套基于MaxCompute&#xff08;原ODPS&#xff09;的DW(数据仓库)解决方案&#xff0c;它集成了阿里多年的DW实施经验&…
阅读更多...
@update 的常见用法 Vue.js

@update 的常见用法 Vue.js

在 Vue.js 中&#xff0c;update 是一个事件监听器&#xff0c;通常用于监听自定义组件或某些 Vue 原生组件&#xff08;如 <input> 或自定义组件&#xff09;的更新事件。它并不是 Vue 的核心 API&#xff0c;而是一种约定俗成的命名方式&#xff0c;用于处理组件内部状…
阅读更多...
Vue3 Transition组件深度解析：结合Element Plus实践指南

Vue3 Transition组件深度解析：结合Element Plus实践指南

引言 在Vue3的动画生态中&#xff0c;Transition组件是构建流畅交互体验的核心工具。本文将深入探讨其工作原理&#xff0c;并配合Element Plus组件库的实际案例&#xff0c;展示如何实现企业级应用的优雅过渡效果。 一、Transition组件核心机制 1.1 过渡类名生命周期 Vue3为…
阅读更多...
【江科协-STM32】6. TIM编码器接口

【江科协-STM32】6. TIM编码器接口

1. 编码器接口简介 编码器接口(Encoder Interface)&#xff0c;可接收增量&#xff08;正交&#xff09;编码器的信号&#xff0c;根据编码器旋转产生的正交信号脉冲&#xff0c;自动控制CNT自增或自减&#xff0c;从而指示编码器的位置、旋转方向和旋转速度。 每个高级定时器…
阅读更多...
最新文章

Copyright @ 2022~2023