2020-10-19前端学习笔记 - CSS3的新特性

最新推荐文章于 2024-02-17 00:09:36 发布

一笑程序猴

最新推荐文章于 2024-02-17 00:09:36 发布

阅读量5.5k

点赞数

分类专栏：笔记技术文章标签：选择器盒子模型过渡 nth-child transition

本文链接：https://blog.csdn.net/lixiaosenlin/article/details/109171196

版权

技术同时被 2 个专栏收录

62 篇文章 2 订阅

订阅专栏

笔记

15 篇文章 4 订阅

订阅专栏

本文详细解读CSS3的属性选择器，如何根据元素属性直接选取，结构伪类如何根据文档结构选择元素，以及过渡效果如何为元素平滑过渡。涵盖了关键知识点如:nth-child和:nth-of-type的区别，以及伪元素在设计中的应用。

摘要由CSDN通过智能技术生成

CSS3的新特性

属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器了

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

注意：类选择器、属性选择器、伪类选择器的权重都是10

结构伪类选择器

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

选择符	简介
E:first-child	匹配父元素中第一个子元素E
E:las-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个)

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

n 可以是数字、关键字和公式
- n如果是数字，就是选择第n个子元素，里面的数字从1开始
- n可以是关键字，如nth-child(even)/nth-child(odd)则是获取偶数行或奇数行
- n可以是公式，如nth-child(n):注意这里的字母必须用n不能用其它字母，n从0开始每次加1，往后面计算（第0个元素或超出了元素的个数会被忽略），相当于选择了所有子元素
- 常用的公式如下：
  
  取值
  偶数
  + 1
  5 10 15 …5的倍数
  5
  +5

取值
偶数
+ 1
5 10 15 …5的倍数
5
+5

nth-child 与nth-of-type去别

nth-child：会把所有的盒子都排列序号（不管是不是同一类元素），在执行的时候先看nth-child(n)，然后再去看前面的标签名称
nth-of-type：会把指定的元素排列序号，在执行的时候首先看指定的元素，然后再去看nth-of-type(n)第几个孩子。

<style>
	/*选不到元素，因为第一个孩子是p而div是2*/
	section div:nth-child(1){} 
	/*可以选出第一个div*/
	section div:nth-of-type(1){}
</style>
<section>
	<p></p>
	<div></div>
	<div></div>
</section>

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
|选择符|简介 |
|–|--|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |

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

伪元素使用场景：

配合字体图标，例如在文本框后面增加一个下拉小三角
鼠标悬浮盒子上出现遮盖层
利用伪元素清除浮动

盒子模型

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

CSS3 滤镜filter

filter css属性将模糊或颜色便宜等图形效果应用于元素
用法：filter:函数(); 例如：filter:blur(5px); blur模糊处理，数值越大越模糊

CSS3过渡（重点）

过渡（transition）是css3中具有颠覆性的特征之一，我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另外一个状态
可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持，但不会影响页面布局

transition：要过渡的属性花费时间运动曲线何时开始

属性：想要变换的css属性，宽度高度背景颜色内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
花费时间：单位是秒（必须写单位）如0.5s
运动曲线：默认是ease（可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s（可以省略）
过渡口诀：谁过渡给谁加，如果要写多个属性用逗号分隔或用all也可以

过渡案例：实现进度条效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            border-radius: 7px;
            transition: all .7s;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

</html>