css3有哪些新增属性、新增伪类、伪类和伪元素的区别?

CSS3 新增了那些属性

CSS3 新增属性很多，先列举出一些关键的新增内容：

新增各种 css 选择器
盒子模型属性：border-radius、box-shadow、border-image
背景：background-size、background-origin、background-clip
文本效果：text-shadow、word-wrap
颜色：新增 RGBA，HSLA 模式
渐变：线性渐变、径向渐变
字体：@font-face
2D/3D转换：transform、transform-origin
过渡与动画：transition、@keyframes、animation
多列布局
媒体查询

以下是其中一些常见的：

• border-radius：用于设置元素的圆角效果。
• box-shadow：用于在元素周围创建阴影效果。
• transition：用于控制元素的过渡效果，如颜色、大小、位置的平滑过渡。
• transform：用于对元素进行旋转、缩放、倾斜等变换操作。
• gradient：用于创建元素的渐变效果，包括线性渐变和径向渐变。
• flexbox：用于实现弹性盒子布局，使元素更好地适应不同屏幕尺寸。

CSS3新增伪类有那些?

• :hover：鼠标悬停伪类。
• :active：激活伪类，例如鼠标点击时。
• :focus：元素获得焦点时。
• :visited：链接被访问过的状态。
• :lang(language)：根据语言匹配元素。
• :after ：在元素之前添加内容,也可以用来做清除浮动。
• :before ：在元素之后添加内容。
• :enabled ：已启用的表单元素。
• :disabled ：已禁用的表单元素。
• :checked： 单选框或复选框被选中。
• ::selection：用于设置文本被选中时的样式。
• :nth-child(n)：选择第n个子元素，可以使用表达式来选择一定规律的子元素。
• :not()伪类：允许选择除了指定元素之外的所有元素。
• :not(selector)：选择不符合给定选择器的元素。
• :placeholder-shown：选择具有占位符的输入框，并且占位符可见时的样式。
• :valid和:invalid：选择表单元素中有效或无效的输入。
• :target：用于选择当前活动的目标元素。
• p:first-of-type ：选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
• p:last-of-type ：选择属于其父元素的最后<p>元素的每个 <p> 元素。
• p:only-of-type ：选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
• p:only-child ：选择属于其父元素的唯一子元素的每个 <p> 元素。
• p:nth-child(2) ：选择属于其父元素的第二个子元素的每个 <p> 元素。
• :nth-child(n)：匹配元素是父元素的第n个子元素
• :nth-child()：允许选择指定位置的子元素。
• :first-child：元素是父元素的第一个子元素。
• :last-child：元素是父元素的最后一个子元素。

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS
定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

CSS3文字效果

   - hanging-punctuation：规定标点字符是否位于线框之外。

   - punctuation-trim：规定是否对标点字符进行修剪。

   - text-align-last：设置如何对齐最后一行或紧挨着强制换行符之前的行。

   - text-emphasis：向元素的文本应用重点标记以及重点标记的前景色。

   - text-justify：规定当 text-align 设置为 "justify" 时所使用的对齐方法。

   - text-outline：规定文本的轮廓。

   - text-overflow：规定当文本溢出包含元素时发生的事情。

   - text-shadow：向文本添加阴影。

   - text-wrap：规定文本的换行规则。

   - word-break：规定非中日韩文本的换行规则。

   - word-wrap：允许对长的不可分割的单词进行分割并换行到下一行。

CSS3边框

   - border-radius：CSS3圆角边框。

   - box-shadow：用于向方框添加阴影。

   - border-image：CSS3边框图片，可以使用图片来创建边框。

CSS3背景

   - background-size：属性规定背景图片的尺寸。

   - background-origin：属性规定背景图片的定位区域。

   - background-clip：规定背景的绘制区域。 

CSS3 转换

   - transform 向元素应用 2D 或 3D 转换。

   - transform-origin 允许你改变被转换元素的位置。

   - transform-style 规定被嵌套元素如何在 3D 空间中显示。

   - perspective 规定 3D 元素的透视效果。

   - perspective-origin 规定 3D 元素的底部位置。

   - backface-visibility 定义元素在不面对屏幕时是否可见。

CSS3 过渡

当元素从一种样式变换为另一种样式时为元素添加效果。

   - transition：简写属性，用于在一个属性中设置四个过渡属性。

   - transition-property：规定应用过渡的 CSS 属性的名称。

   - transition-duration：定义过渡效果花费的时间。默认是 0。

   - transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。

   - transition-delay：规定过渡效果何时开始。默认是 0。

CSS3动画： ( 简单动画的实现， 如旋转等)

通过 CSS3，我们能够创建简单的动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript

依靠 CSS3 中提出的三个属性: transition 、 transform 、 animation。

transition 过渡动画：定义了元素在变化过程中是怎么样的， 包含 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 。

transform ：定义元素的变化结果， 包含 rotate 、 scale 、 skew 、 translate 。

animation 关键帧动画 :动画定义了动作的每一帧 ( @keyframes ) 有什么效果， 包括 animation- name ， animation-duration 、 animation-timing-function 、 animation- delay 、 animation-iteration-count 、 animation-direction。

transition 过渡动画：

   - transition-property：指定过渡的 CSS 属性
   - transition-duration：指定过渡所需的完成时间
   - transition-timing-function：指定过渡函数
   - transition-delay：指定过渡的延迟时间

animation 关键帧动画：

   - @keyframes：规定动画。
   - animation：所有动画属性的简写属性，除了 animation-play-state 属性。
   - animation-name：指定要绑定到选择器的关键帧的名称，规定 @keyframes 动画的名称。
   - animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
   - animation-timing-function：设置动画将如何完成一个周期，规定动画的速度曲线。默认是 "ease"。
   - animation-delay：设置动画在启动前的延迟间隔，规定动画何时开始。默认是 0。
   - animation-iteration-count：定义动画的播放次数，默认是 1。
   - animation-direction：指定是否应该轮流反向播放动画，规定动画是否在下一周期逆向地播放。默认是 "normal"。
   - animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
   - animation-play-state：指定动画是否正在运行或已暂停，默认是 "running"。

CSS3多列

   - column-count：指定元素应该被分割的列数。

   - column-fill：指定如何填充列

   - column-gap：指定列与列之间的间隙

   - column-rule： 所有 column-rule-* 属性的简写

   - column-rule-color：指定两列间边框的颜色

   - column-rule-style：指定两列间边框的样式

   - column-rule-width：指定两列间边框的厚度

   - column-span：指定元素要跨越多少列

   - column-width：指定列的宽度

   - columns：设置 column-width 和 column-count 的简写

CSS3用户界面

 - resize：属性规定是否可由用户调整元素尺寸。

   - box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。

   - outline-offset：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

   - appearance：允许您使一个元素的外观像一个标准的用户界面元素。

   - icon：为创作者提供了将元素设置为图标等价物的能力。

   - nav-down：指定在何处使用箭头向下导航键时进行导航。

   - nav-index：指定一个元素的Tab的顺序。

   - nav-left：指定在何处使用左侧的箭头导航键进行导航。

   - nav-right：指定在何处使用右侧的箭头导航键进行导航。

   - nav-up：指定在何处使用箭头向上导航键时进行导航。

伪类和伪元素的区别

伪类（pseudo-class）伪类是选择器的一种，用于选择元素的特定条件的元素、状态或位置。它们以冒号（:）开头，用于向特定的元素添加样式。并基于其状态或属性来应用样式。伪类通常通过选择器的一部分来表示，常见的伪类有：:hover、:active、:focus等。它们是真实文档中已存在的元素的特殊状态。

伪元素（pseudo-element）则是在元素内部选择特定部分插入样式内容。伪元素以双冒号（::）开头，用于向文档的特定部分添加样式。常见的伪元素有::before、::after、::first-line等。它们不是真实的文档中已存在的元素，而是通过CSS生成的虚拟元素。

区别

• 伪类和伪元素的区别在于它们的作用对象不同
• 伪类是用于向特定选择器添加特殊效果的关键词，例如:hover用于鼠标悬停时的样式变化。
• 伪元素则是在文档中创建虚拟元素，并为其赋予特定样式，例如使用::before来在元素前插入内容。
• 伪类表状态
• 伪元素是真的有元素
• 前者单冒号，后者双冒号

具体来说，伪类用于选择元素的特殊状态或位置，例如悬停、点击等，而伪元素用于在元素的特定位置或内容前后插入样式。伪类用于选择已存在的元素，而伪元素则用于创建新的元素或部分。换句话说，伪类用于选择，而伪元素用于生成。

持续学习总结记录中，回顾一下上面的内容：
css3有哪些新增属性、CSS3新增伪类有那些?、CSS3文字效果、CSS3边框、CSS3背景、CSS3 转换、CSS3 过渡、CSS3动画： ( 简单动画的实现， 如旋转等)、CSS3多列、CSS3用户界面、伪类和伪元素的区别?