优先级：!important > style > id > class、属性、伪类 > 元素、伪元素
!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。
CSS选择器有哪些？CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）
CSS那些属性可以继承？CSS属性速览（含版本、继承性和简介）
可继承的属性：visibility、color、cursor、zoom、direction（特殊：<a>标签的字体颜色不能被继承）
字体全部都可以继承：font、font-style、font-variant、font-weight、font-size、font-family、font-stretch
文本除了vertical-align，其它都可继承：text-align、text-justify、text-indent、line-height、word-wrap等等
文本装饰：text-underline-position、text-shadow
li相关：list-style、list-style-image、list-style-position、list-style-type
不可继承的样式：定位、布局、尺寸、内边距、外边距、背景、边框相关等等
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用css伪元素与伪类思维导图
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，单冒号表示伪类，伪元素的语法被修改成使用双冒号，成为::before ::after。伪元素并不存在与dom中，只存在于页面之中。
::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。
浏览器是怎样解析CSS选择器的？浏览器在碰到HTML中指向CSS文件的链接时，会获取并解析CSS文件。CSS文件会被浏览器转为CSS对象模型。不仅是外部CSS，内部style元素或行内style属性中的CSS也会被解析并添加到这个对象模型中。这个对象模型事宜个树形结构，包含页面中样式的层次结构。
每个CSS选择符都会匹配一个DOM节点，然后浏览器会基于层叠、继承和特殊性来计算每个DOM节点的最终样式。
浏览器『从右往左』解析CSS选择器
CSS-伪元素和伪类（思维导图）
p:first-of-type 选择属于其父元素的第一个出现的p
p:last-of-type 选择属于其父元素最后一个出现的p
p:only-of-type 选择属于其父元素唯一的p元素
p:only-child 选择属于其父元素的唯一子元素（没有任何兄弟元素的p元素）
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
CSS3参考手册属性列表（链接中紫色链接表示该属性在CSS3有修改或者增加了新的属性值；橙色链接表示该属性是CSS3新增属性 ）
下面列出容易记的几个
媒体查询（@media (min-width:600px)）
嵌入web字体（@font-face）
过渡（transition）与动画（animation）
【阴影】box-shadow
【边框】创建圆角（border-radius）、边框图片（border-image）
【背景】背景图片尺寸（background-size）、背景图片定位（background-origin）、背景裁剪（background-clip）、多重背景（background-image:url(1.jpg),url(2.jpg);）
【文字】允许长单词换行（word-wrap:break-word）、文字阴影（text-shadow）
【颜色】rgba和透明度opacity
【渐变】线性渐变（gradient）
【布局】flex、grid、多栏布局
【盒模型】box-sizing
▶包含块CSS基础一定要看的包含块containing block
包含块的确定确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：
static、relative、sticky：包含块可能由它的最近的祖先块元素的内容区的边缘组成。也可能会建立格式化上下文(比如说 table container, flex container, grid container, 或者是block container 自身)。
absolute： 包含块就是由它的最近的 position 的值不是 static 的祖先元素的内边距区的边缘组成。
❗注意以上两个，一个是内容区、一个是内容边距区
fixed：在连续媒体的情况下包含块是窗口视图（viewport）,分页媒体下的情况下包含块是分页区域(page area)。
如果position值是absolute或fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：