CSS3的一些新特性

2020-04-19

属性选择器

选择器	说明
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: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 个

nth-child(n)

n 可以是数字，关键字和公式
n 如果是数字，就选择第 n 个元素，n 从 1 开始
n 可以是关键字，even 代表偶数，odd 代表奇数
n 可以是公式，常见的公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素或者超出了元素的个数会被忽略）

nth-child(n) 与 nth-of-type(n) 的区别

E:nth-child(n) 在执行时会先把选择到的所有盒子都先进行排序，再执行 nth-child(n)，然后再与 E 匹配
E:nth-of-type(n) 在执行时会先把指定的所有盒子都先进行排序，再与 E 匹配，然后再执行 nth-child(n)

/* html */
<section>
  <p>羊</p>
  <div>羊羊</div>
  <div>羊羊羊</div>
</section>

/* css */
section div:nth-child(1) {
  color: red;
}
section div:nth-of-type(1) {
  color: blue;
}

/* 第一个选择限定的样式无效，第二个选择限定的样式生效*/

伪元素选择器

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

注意：

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

盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，可设置为 content-box 或者 border-box

box-sizing: content-box 盒子大小为 width + padding + border （默认值）
box-sizing: border-box 盒子大小为 width，padding 和 border 就不会撑大盒子了，前提是 padding + border <= width

滤镜

CSS3 中可以通过 filter 将模糊或颜色偏移等图形效果应用于元素

选择符	说明
filter: none	默认值，无效果
filter: initial	设置属性为默认值
filter: inherit	从父元素继承该属性
filter: blur(px)	给图像设置高斯模糊。”radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是 0；这个参数可设置 css 长度值，但不接受百分比值。
filter: brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是 0%，图像会全黑。值是 100%，则图像无变化。其他的值对应线性乘数效果。值超过 100%也是可以的，图像会比原来更亮。如果没有设定值，默认是 1。
filter: contrast(%)	调整图像的对比度。值是 0%的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。
filter: drop-shadow	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。
filter: grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为 100%则完全转为灰度图像，值为 0%图像无变化。值在 0%到 100%之间，则是效果的线性乘子。若未设置，值默认是 0；
filter: hue-rotate(deg)	给图像应用色相旋转。”angle”一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置，默认值是 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。
filter: invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为 0%则图像无变化。值在 0%和 100%之间，则是效果的线性乘子。若值未设置，值默认是 0。
filter: opacity(%)	转化图像的透明程度。值定义转换的比例。值为 0%则是完全透明，值为 100%则图像无变化。值在 0%和 100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是 1。该函数与已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速。
filter: saturate(%)	转换图像饱和度。值定义转换的比例。值为 0%则是完全不饱和，值为 100%则图像无变化。其他值，则是效果的线性乘子。超过 100%的值是允许的，则有更高的饱和度。若值未设置，值默认是 1。
filter: sepia(%)	将图像转换为深褐色。值定义转换的比例。值为 100%则完全是深褐色的，值为 0%图像无变化。值在 0%到 100%之间，则是效果的线性乘子。若未设置，值默认是 0；
filter: url()	URL 函数接受一个 XML 文件，该文件设置了一个 SVG 滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：`filter: url(svg-url#element-id)`

过渡

transition: 需要过渡的属性1 花费时间运动曲线延时时间, 需要过渡的属性2 花费时间运动曲线延时过渡, ...

属性：需要变化的 CSS 属性，宽度高度背景颜色内外边距等。如果想要所有属性都变化过渡，可以直接写 all
花费时间：单位秒（必须）
运动曲线：默认 ease （可省略）
延时过渡：单位秒（必须），默认 0s （可省略）

一个正在成长的前端小白~