伪元素选择器
first-line匹配内容的第一行元素
first-letter 匹配内容的第一个字符
:before{
content:"内容"; 在一个元素之前插入内容
}
:after{
content:"内容"; 在一个元素之后插入内容
}
::selection{
color:#000;
background:#000;
} 使元素鼠标点击滑过文字后，有颜色变化效果
目标伪类选择器
TAB菜单切换效果
:target{}
div:target{
width: 100px;
height: 200px;
background-color: orange;
}
状态伪类选择器
常适用input标签
:disabled 禁用
:enabled 非禁用
:read-only 只读
:focus 获得焦点——这个要放在其他情况下面才能生效，权重低。
:checked 选中
获得焦点:
禁 用:
非禁用:
只 读:
选中:
结构伪类选择器
:root 根元素(一般指的是body)
:empty 内容为空的元素
----------- 不常用 -------------
:first-child 第一个
:last-child 最后一个
:nth-child(n) 找到第n个元素
:nth-last-child(n) 找到倒数第n个元素
:only-child 找到属于其父元素的唯一子元素的每个元素
------------- 常 用 -------------
:first-of-type 找到第一个元素
:last-of-type 找到最后一个元素
:nth-of-type(n) 找到指定的第n个元素
:nth-last-of-type(n) 找到指定的倒数第n个元素
:only-of-type 找到属于父元素的特定类型的唯一子元素的每个元素
:nth-of-type(odd) 找到元素中的奇数元素
:nth-of-type(even) 找到元素中的偶数元素
否定伪类选择器
:not 找到除了not出来的元素
选择器找的非指定元素
属性选择器
通过元素的属性或属性值来获取元素
[value] [属性名]选择某个属性的元素
[value][name] [属性名][属性名]可同时筛选多个
input[value] 匹配条件[属性名]
[value = "按钮"] [属性名 = "属性值"]选取某个指定属性值的元素
[name ~= "b"] [属性名 ~= "属性值1 2 3 4"]选取具有某个属性且包含的所有属性
[name |= "inner"] [属性名 != "属性值"]具有某个属性，且属性值以某些字符串作为前缀
[name *= "按钮"] [属性名 *= "属性值"]包含某些字符的
[name ^= "inner"] [属性名 ^= "属性值"]以某些字符开头的
[name $= "html"] [属性名 $= "属性值"]以某些字符结尾的
