一、CSS选择器

CSS选择器优先级排序

!important>内联选择器>id选择器>类选择器=属性选择器=伪类选择器>元素选择器=伪元素选择器

CSS选择器类型

1.!important

!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，作用是提高指定样式规则的应用优先权，语法格式{ sRule!important }，即写在定义的最后面,并且在分号之前，比如：

{font-color: red !important;}

可以利用!important解决部分CSS的浏览器兼容问题

2.内联选择器

写在元素的style属性中，不方便复用与后期维护，不过多赘述

3.id选择器

id选择器通过元素的id属性值选中唯一的元素。标识符为“#”

4.类选择器

类选择器通过class属性选中元素，可以选中多个元素。标识符为“.”

5.属性选择器

属性选择器匹配存在该属性或者属性为特定值的元素具体用法可参考www.jianshu.com/p/b3b3c0227…

6.伪类选择器

伪类选择器以冒号( : )作为前缀标识符。冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪类对象名，冒号前后没有空格，否则将认为类选择器。
一些常用的伪类选择器可参考下方

:link               用法--a:link           选择所有未访问链接
:visited            用法--a:visited        选择所有访问过的链接
:active             用法--a:active         选择活动链接
:hover              用法--a:hover          选择鼠标在链接上面时
:focus              用法--input:focus      选择具有焦点的输入元素
:first-letter       用法--p:first-letter   选择每一个<p>元素的第一个字母
:first-line         用法--p:first-line     选择每一个<p>元素的第一行
:first-child        用法--p:first-child    指定只有当<p>元素是其父级的第一个子级的样式
:before             用法--p:before         在每个<p>元素之前插入内容
:after              用法--p:after          在每个<p>元素之后插入内容
:lang               用法--p:lang(it)       选择一个lang属性的起始值="it"的所有<p>元素

7.元素选择器

直接选择某个标签，不过多赘述

8.伪元素选择器

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

::first-letter 第一个字母
::first-line 第一行
::selection 选中的内容
::before和::after
::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用

二、CSS层叠优先级

当css两条规则发生冲突时，会有一条规则没有按照预期生效，我们需要知道最终网页呈现出的效果，这就要理解css的层叠规则。
层叠就是css解决冲突的一系列规则，它有三种条件解决冲突，具体如下图所示

NFWOD$TM60SYC7D3%FQXW.png
很容易就发现我们在写css时应该避免以下三点

少用id选择器(唯一并且优先极高)
尽量别用！important（优先级最高，容易出错）
自己写的样式表加载在引用库样式之后（见图）

三、CSS动画

1.transform

transform即字面意思，变形。在CSS3中transform支持的几个操作有

rotate旋转
skew扭曲
scale缩放
translate移动
martix矩阵变形

transform各操作使用介绍

transform的所有操作都会有一个默认的基点——元素的中心位置，如果想要改变元素基点可以使用transform-origin：(x,y)
rotate(xx deg)(2D), rotateX()(3D), rotateY()(3D)：以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转。
translate(x,y),translateX(x),translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移。
scale(x,y),scaleX(x,1)，scaleY(1,Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。
skew(x,y)，skewX(x)，skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

2.transition

transition即过渡，可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画。CSS提供了5个有关属性，如下所示：

transition-property：设置元素中参与过渡的属性；
transition-duration：设置元素过渡的持续时间；
transition-timing-function：设置元素过渡的动画类型；
transition-delay：设置过渡效果延迟的时间，默认为 0；
transition：简写属性，用于同时设置上面的四个过渡属性。

3.animation

可以参考c.biancheng.net/css3/animat…
自己写的动画较少比较菜

四、响应式布局

1. 媒体查询

通过@media为不同尺寸的屏幕设置不同的样式。当屏幕尺寸符合条件时会使用其中的样式，并且会替换掉外部相同的样式，不同样式则会被继承

/* 屏幕小于 500 px */
@media screen and (max-width: 500px) {
    div {
        background-color:blue;
    }
}

/* 屏幕大于 500 px */
@media screen and (min-width: 500px) {
    div {
        background-color:green;
    }
}

/* 屏幕小于 500px 大于 300px */
@media screen and (min-width: 300px) and (max-width: 500px){
    div {
        background-color:yellow;
    }
}

2. flex弹性布局

flex属性可以参考blog.csdn.net/qq_45815947… 这里主要写一下特殊的几种写法

属性	展开	作用
flex:auto	flex:1 1 auto	有剩余空间自动放大，不够空间则自动缩小，相对于自适应大小
flex:none	flex:0 0 auto	不放大不缩小，按width展示项目宽度
flex:0%	flex:1 1 0%	自适应大小

3. rem布局

rem指相对于根元素的字体大小的单位，注意与em(相对于父级的字体大小单位)的区别
rem计算时要仔细

4. grid布局

grid布局可以参考www.ruanyifeng.com/blog/2019/0…

我CSS查缺补漏 ｜ 青训营笔记