选择器基本知识

一.****//通配符选择器（也叫子字符串选择器）
所有 ^开头 $结尾包含|默认加-[data-cod{e}^{=}"kk"][data-code$=“kk”]
[data-code=“kk”]
[data-code~=“kk”]
[data-code|=“kk”]
//后代选择器div p
//子选择器 div>p
//相邻选择器 div+p
//分组选择器 div,p
e,e{属性:属性值;}
div>span>p>b>i 按tab快速创建结构
div ~p{} 同级间的包含
//伪类选择器
伪类用来指定选择器某种特定状态或者条件，伪类在DOM中并不存在，但对用户是可见的。

//动态伪类，前面要加:
1、hover 鼠标滑过
2、link 向未访问过的链接添加样式
3、visited 向访问过的链接添加样式
4、active 激活元素添加样式（例如：按下）
5、focus 向拥有输入键盘焦点的元素添加样式 solid 实线 border 边框
//结构性伪类
ul>li:first-child
{
color:red;
}
1、first-child 匹配父类第一个子元素
2、last-child 匹配父类最后一个子元素
3、nth-child(n) 匹配父类元素第几个子元素 odd 2n 匹配奇数 even 2n+1偶数
//语言伪类 1、:lang(值) 向带有指定lang属性元素添加样式
lang=“国际语言缩写” 代表该标签内所写语言。
//伪类元素选择器
::first-letter 第一个字
::first-line 第一行
font-size:控制文字大小
p::first-letter{
color:red;
font-size:44px;
}
p::first-line{
color:red;
font-size:44px;
}
与伪类选择器的不同点：
伪类选择器一个: ， 伪元素选择器两个 ::
仅限于块级元素
::before 在之前设定样式 1、需要配合content使用，content内一定要写内容，否则不显示。
::after 在之后设定样式
::selection 选中时的样式
div::before
{
width:100px;
height:100px;
background-color:blue;
content:"*****"
}
div::selection
{
color:yellow;
}
//选择器优先级
直观权重：
10000 !importment （写在后面）
1000 内联 外联
100 id选择器
10 类选择器 伪类选择器 属性选择器
1 元素伪类选择器
0 通配符选择器 后代选择器 兄弟选择器
div
{
width:100px;
height:100px;
background-color: yellow !importment;
}
微观权重：
1,0,0,0,0 !importment （写在后面）
0,1,0,0,0 内联 外联
0,0,1,0,0 id选择器
0,0,0,1,0 类选择器 伪类选择器 属性选择器
0,0,0,0,1 元素伪类选择器
0,0,0,0,0 通配符选择器 后代选择器 兄弟选择器
在一个节点上设定的样式越多，越受权重影响。
使用原则：
1、使用就近原则
2、继承样式的优先级别最低
3、!inportment的样式优先级别最高，如有冲突则重新计算。
//CSS单位
尺寸单位：
% 百分比
in（英寸） 1in=96px=2.54cm
cm（厘米）
mm（毫米）
pt point 大约七十二分之一英寸
px 像素
em 浏览器默认字体大小 16px 1em=16px 2em=32px
如果当前元素设置字体大小则 em会根据当前元素进行倍数放大
如果没有在当前元素设置字体大小 则选择默认浏览器字体大小进行放大倍数
rem 根据根（html）元素字体尺寸的倍数
在html上设置字体大小，下面设置rem 会根据根元素大小进行倍数放大
手机端布局方式：
% 百分比布局
em布局
rem布局
flex（主流）布局
视窗相对单位：
vw 代表一屏的宽度
vh 代表一屏的高度
//颜色单位
1、颜色名 直接写单词，
2、rgb rgb值 red 红色通道 green 绿色通道 blue 蓝色通道
如rgb(255,255,255) 即白色。
3、rgb rgb百分比值 如rgb(0%,100%,0%) 即绿色 理解为浓度
4、rgba red 红色通道 green 绿色通道 blue 蓝色通道 alpha透明通道（取值范围0~1）
5、16进制数 #000000 #ffffff
//背景
background-color 背景颜色
background-image 背景图片（image在使用时需要添加:url(地址) ，或者写none不显示背景图 ）
background-repeat 背景图平铺
{
background-repeat:repeat 背景图平铺 （不自适应）
background-repeat:no-repeat 背景图不平铺
background-repeat:repeat-x 背景图沿X轴平铺（横向平铺）
background-repeat:repeat-y 背景图沿Y轴平铺（纵向平铺）
background-repeat:round 自动缩放，充满整个容器（自适应）
background-repeat:space
}
//背景图定位
background-position:x y （X减小，图片向右走，视线向左；Y减小，图片向上走，视线下移）
icon 图标 雪碧图/精灵图 滑动门
为什么使用雪碧图？ icon-font 阿里巴巴矢量图标库
1、提高浏览器加载速度
2、
background:颜色背景 url（地址） no-repeat（是否平铺） left（图片位置，left靠左显示 top向上显示，center居中显示） （支持IE）