关于伪类选择器
- a标签的伪类选择器
顺序：
a:link->a:visited(点击后的样式)->a:hover(鼠标放在链接上的样式)->a:active(鼠标点击时的样式) - E:focus 在元素获得焦点时给元素添加样式，如input的textarea或text
- E:disabled 匹配禁用的表单元素
E:enabled 匹配表单中可用的元素 - E:checked 匹配被选中的元素(radio/checkbox)
- E:selection 匹配用户当前选中的元素
- E:nth-child(n) 匹配父元素下的第n个子元素 ，第一个编号为1
E:nth-last-child(n) 匹配E的父元素下倒数第n个子元素,第一个编号为1 - E:nth-of-type(n) 与nth-child(n)类似，匹配的是标签元素
- E:nth-last-of-type(n) 匹配父级标签元素下倒数第n个子元素
- E:last-child 匹配父元素的最后一个子元素
- E:last-of-type 匹配父元素下使用同种标签的最后一个子元素
- E:first-of-type 匹配父元素下使用同种标签的第一个子元素
- E:only-child E是否是父元素下唯一的子节点
- E：only-of-type 是否是唯一的这个标签
n的取值：
2n+1 基数 2n是偶数
3n是第三行，3n+1是第一行，3n+2是第二行···
nth-child(even) 偶数行
nth-child(odd) 奇数行 -
E:empty 找到其中完全为空的元素(空格和换行也不算空，直接添加注释的可以算作空元素）
伪元素
在wrap所在元素内容之前添加aaa
.wrap::before{
content:"aaa";
}
在wrap所在元素内容之后添加bbb
.wrap::after{
content:"aaa";
}
选择器优先级
1.有!important，权重最大
2.内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
*同级下面的覆盖上面的
组合选择器
- E,F 多元素选择器，同事匹配E和F元素
- E F后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
- E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
- E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
- E~F 普通相邻选择器，匹配E元素之后的同级元素F（无论直接相邻与否）
- .class1.class2 匹配class="class1 class2"的元素
- element#id 匹配element元素中的id元素
属性选择器
- E[attr] 匹配所有具有属性attr的元素
- E[attr='a']从选择器中筛选具有这个属性名称，并且属性值为指定值的元素
- 可以通过自定义属性找到元素
比如：input[miaov="liu"] - 选择器[属性名称^="值"]
从选择器中筛选具有这个属性名称，并且属性值以指定值开头的元素
比如：input[miaov^="l"] - 选择器[属性名称$="值"]
从选择器中筛选具有这个属性名称，并且属性值以指定值结尾的元素
比如：input[miaov$="l"] - 选择器[属性名称="值"]
从选择器中筛选具有这个属性名称，并且属性值包含指定值的元素
比如：input[miaov="l"] - 选择器[属性名称|="值"]
从选择器中筛选具有这个属性名称，并且属性值为"指定值-"的元素
比如：input[miaov|="l"]
新增选择器
input::-webkit-input-placeholder {
color: pink;
}
div:first-letter {
color: red;
font-size: 2em;
}
div:first-line {
color: pink;
}
.wrap h2:first-child { background-color: red; }
选择到class为wrap的所有元素，找到元素下的所有的h2，并且这个h2是它父级下的第一个子节点，选择到这个h2
继承
color
font-size/font-family/font-weight/line-height
不继承
display
margin
padding
border
查看字体
控制台输入escape ('微软雅黑')，把%u换成/
文本
text-align：justify 两端对齐（在自动折行的情况下进行）
text-transform改变文字大小写 none、uppercase、lowercase、capitalize（首字母变大写）
white-space:nowrap; 强制不换行
text-overflow：ellipsis; 多余内容显示为···
em 父元素的倍数
rem body的字体大小的倍数，chrome默认16px
vw宽度 为屏幕的1%
