css选择器史上最详细保姆级教学

 一些新手朋友对选择器一知半解，不知道在什么情况下运用什么样的选择器，这是一个比较头疼的问题，针对新手朋友，对CSS选择器作一些简单的说明，希望能对大家的学习工作有一定的帮助

css选择器：基本选择器（八种），伪元素选择器，伪类选择器

       基本选择器：

       1.元素选择器E{}*元素选择器中的特例，代表所有类型的元素*{margin：0，padding：0}

       2.属性选择器E[ater]{}^=前缀 $=后缀 *=包含 =严格等于

       3.兄弟元素选择器selector1~selector2{} 从selector1向下查找selector2的兄弟元素

       4.选择器组合 selector1，selector2，...{}

       5.ID选择器 #id值{} 元素选择器与ID选择器结合时没有空格

       6.class选择器 .class值{}元素选择器与class选择器结合时没有空格

       7.包含选择器 selector1 selector2 ...{}

       8.子元素选择器 selector1>selector2>...{}

       伪元素选择器：

       1.首字符伪元素选择器::first-letter{} 使用前提：依附元素必须是块级元素

       2.首行伪元素选择器::first-line{}使用前提：依附于块级元素

       3.自定义内容前置伪元素选择器::before{} 使用前提：不管需不需要自定义内容，必须使用content属性

       4.自定义内容后置伪元素选择器::after{} 使用前提：不管需不需要自定义内容，必须使用content属性

       伪类选择器

       1.结构性伪类选择器：nth-child（）着重是位置括号中可以放数字，数字从1开始代表第一个；odd奇数 even偶数，加法表达式2n+1其中n从0开始

       nth-child(1)==:first-child查找第一个元素

       nth-last-child==:last-child查找最后一个元素

       nth-of-type() 着重点是类型 括号中可以放数字，括号中可以放数字，数字从1开始代表第一个；odd奇数 even偶数，加法表达式2n+1其中n从0开始

       nth-of-type(1)==:first-of-type查找第一个元素

       nth-last-of-type==:last-of-type查找最后一个元素

       UI状态伪类选择器

       :hover 悬停状态

       :focus 焦点状态

       :checked 选中状态

       其他伪类选择器

       :not()过滤到某个或某些元素

       css优先级规则：

       1.选择器写的越准确(越长)。优先级越高

       布局：

       弹性盒子布局：display:flex

       配套属性：

       flex-direction:作用对象是弹性盒子设置弹性盒子内子元素的排列方向，其值有row(横着，默认)，column(竖着)，column-reverse(反方向竖着)row-reverse(反方向横着)

       flex-wrap:作用对象是弹性盒子设置弹性盒子内子元素是否换行，其值有nowrap（不换行，默认），wrap(不换行)

       order:作用对象:弹性盒子内子元素 设置该子元素的排列位置 值越小越靠前

       flex:作用对象弹性盒子内子元素 复合属性 flex-grow(拉伸因子) flex-shrink(收缩因子) flex-basis(基准宽度)

       justify-content:作用对象弹性盒子 设置弹性盒子内子元素在排列方向上的分布方式flex-strat(开始)flex-center(中间)flex-end(结尾)space-between(空白在中间)space-around(空格在周围)

       align-items:作用对象:弹性盒子 设置弹性盒子内子元素在排列方式上垂直方向的对齐flex-strat(开始)flex-center(中间)flex-end(结尾)baseline(弹性的开端，以元素底部为对齐)