熟练掌握并充分利用CSS3的新特性，持续更新中。。。

标签：CSS3 code 伪类元素熟练掌握 juejin 充分利用选择器

1.1 尝试新颖的CSS3特性

首先，我们来看一个具体的案例。 https://code.juejin.cn/pen/7277536985772720139

1.2 CSS3新特性简介和浏览器支持情况

新特性简介：

1）强大的CSS3选择器 2）抛弃图片的视觉效果 3）盒模型变化(多列布局和弹性盒模型 ) 4）阴影效果 5）Web字体和web Font 图标 6）CSS3过渡与动画交互效果 7）媒体查询

什么是渐进增强和优雅降级？

1）渐进增强：指一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。相当于向上兼容，从非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。『向上兼容，先满足大多数浏览器』 2）优雅降级：指一开始就构建站点的完整功能，然后针对浏览器测试和修复。相当于向下兼容，从复杂的现状开始，并试图减少用户体验的供给。优雅降级是从复杂的现状开始，并试图减少用户体验的供给。『向下兼容，满足大多数用户使用的主流浏览器』 1.3 CSS3伪类选择器1 1）什么是伪类选择器? 伪类选择器是CSS中的一种选择器，用来选择处于特定状态的元素。伪类选择器是CSS选择器的一种，它可以选择处于特定状态的元素，例如：链接（a:link）、已被访问的链接（a:visited）、激活的链接（a:active）、鼠标悬停链接（a:hover）、目标链接（a:target）等。伪类选择器的语法格式为：选择器：伪类名{属性：值;}。 2）动态伪类选择器动态伪类选择器是CSS中的一种特殊类型的选择器，它可以基于元素当前所处的状态来选取元素。动态伪类选择器有：

:link：匹配所有未被访问的链接。

:visited：匹配所有已被访问的链接。

:hover：匹配鼠标指针浮动在其上的元素。

:active：匹配被用户激活的元素。

:focus：匹配获得焦点的元素。

3）UI元素状态伪类选择器

UI元素状态伪类选择器是根据元素状态来选择元素的一种CSS选择器，常见的UI元素状态伪类选择器包括以下几个：

E:enabled：用来指定当前元素处于可用状态时的样式。

E:disabled：用来指定当前元素处于不可用状态时的样式。

E:read-only：用来指定当元素处于只读状态时的样式。

E:read-write：用来指定当元素处于非只读状态时的样式。

E:default：用来指定当页面打开时默认处于选取状态的单选按钮或者复选框的样式。

E:indeterminate：用来指定当页面打开时，如果一组单选按钮中任何一个单选按钮都没有设定为选取状态时的整组的单选按钮的样式。

E::selection：用来指定当元素处于选中状态时的样式。

Demo1.3 https://code.juejin.cn/pen/7278515130269171775 1.4 CSS3伪类选择器2结构伪类选择器 1）什么是结构伪类选择器？结构伪类选择器是针对HTML的结构进行分类的选择器。结构伪类选择器根据文档结构来选择元素，常用于根据父级选择器里面的子元素，能大大减少HTML元素的id属性和class属性的依赖。结构伪类选择器的特征就是位置，分为三大类，一类是e:first-child、e:last-child、e:only-child、e:nth-child(n/even/odd)等，二类是e:first-of-type、e:last-of-type、e:only-of-type、e:nth-of-type等，三类是e:root、e:empty、e:target、e:not等。 Demo1.4 https://code.juejin.cn/pen/7277792582955565112 1.5 CSS3伪类选择器2结构伪类选择器

CSS3伪元素是CSS3的一个新特性，它可以帮助我们创建一些特殊的样式效果。伪元素之所以被称为伪元素，是因为他们不是真正的页面元素，HTML没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的CSS样式，表面上看上去貌似是页面的某些元素来展现，实际上是CSS样式展现的行为，因此被称为伪元素。
CSS3伪元素有四种类型：

::first-letter：选取元素的第一行文字。
::first-line：选取元素的第一行文字。
::before：在元素内部的前面插入内容。
::after：在元素内部的后面插入内容。

请注意，伪元素必须与真实的选择器一起使用，例如 p::before 或 h1::first-line。使用伪元素可以帮助我们简化HTML结构，而不需要额外的HTML标签。

Demo1.5 https://code.juejin.cn/pen/7277894226740772921

2.1 CSS3用border-radius画圆形

Border-radius的优点：

减少网站的维护工作量

提高网站性能

增加了视觉美观性

Demo2.1 https://code.juejin.cn/pen/7277935336846524471 2.2 CSS3画三角形和对话框 三角形角尖相反的方向设置颜色值。若角尖朝左，则右边角设置颜色值。其他方向同理可得。 1）三角形

Demo2.2.1 https://code.juejin.cn/pen/7278146058071310375 2）对话框

Demo2.2.2 https://code.juejin.cn/pen/7278149522558517289 2.3 CSS3画菱形和平行四边形 transform适用于盒模型元素来倾斜（skew）、旋转（rotate）、缩放（transform-origin）、位移（transform-origin） 1）菱形