css-轮廓，child系列，of-type系列，选择器

轮廓 不会占据位置
/* outline: 10px solid blue; */
    outline-style: dashed;
outline-width: 20px;
outline-color: antiquewhite;
    outline: none;

child系列：
先找到li找他们共有的父元素，判断该父元素中第一个是不是li（是li就选中不是就不选中）
/* li:first-child{
background-color: red;
} */

先找到li找他们共有的父元素，判断该父元素中最后一个是不是li（是li就选中不是就不选中 ）
/* li:last-child{
background-color: yellow;
} */

参数：数字
/* li:nth-child(3){
background-color: red;
} */

  n表示的是0 1 2 3 4 5 6 7 8 9...
2n 表示的是 0*2 1*2 2*2 3*3 ....
3n+1 表示的是在上一步基础上+1
n+3 表示的是 该值后面所有的内容全部选中

/* li:nth-child(n+3) {
background-color: red;
} */

odd 奇数
even 偶数

/* li:nth-child(even){
background-color: red;
} */

of-type系列
先找li然后找li的父亲，直接找父亲第一个li
/* li:first-of-type{
background-color: red;
} */

找li然后找li的父亲，直接找父亲最后一个li
/* li:last-of-type{
background-color: pink;
} */

数字的写法和nth-child是一摸一样的
li:nth-of-type(3n){
background-color: blue;
}

属性选择器
[属性名] 只要元素有该属性就可以选中
/* li[title]{
background-color: red;
} */
[属性名=属性值] 有该属性 并且有对应的值
/* [title='nba']{
background-color: red;
} */
[属性名^=值] 有改属性并且开头是以这个值开头
/* [title^=n]{
background-color: red;
} */
[属性名$=值] 有该属性并且以对应的值结尾的
/* [title$=a]{
background-color: red;
} */
[属性名*=值] 有该属性并且包含该值
[title*=b]{
background-color: red;
}

表单选择器
  获取焦点的元素
/* :focus{
background-color: red;
} */

被选中的表单内容
/* input:checked{
width: 40px;
height: 40px;
} */
被禁用的表单
/* input:disabled{
background-color: red;
} */
可用的表单
/* input:enabled{
background-color: blue;
} */
选中提示内容
/* input::placeholder{
color: red;
font-size: 24px;
} */

选中空元素
/* li:empty{
background-color: red;
} */

鼠标选中文本以后
/* li::selection{
background-color: red;
color: #fff;
} */

选中文本中的第一个字
/*p::first-letter{
color: red;
font-size: 20px;
}/*

选中文本的第一行
/* p::first-line{
background-color: red;
} */
目标选择器 基本配合锚点和hash来使用