通配选择器
*
会选择所有的样式
元素选择器
标签
会选择对应的样式
类选择器
.类名
在标签里面加上该类就可以使用,用的时候不用带.
如果需要用多个类
class=“类名1 类名2”
ID选择器
#ID
对应的ID会使用该样式
复合选择器
交集选择器
选择同时符合多个条件的元素
标签.类#ID
有且只能有标签,可以有多个类
并集选择器
选择符合任意一个条件的元素
选择器1， 选择器2, 选择器3
后代选择器
选择某个选择中的某个选择器所有后代
选择器1 选择器2 最后的选择器
子代选择器
选择某个选择中的某个选择器所有子代
选择器1>选择器2
兄弟选择器
选择紧紧相连的元素
选择器1+选择器2
选择所有同级元素
选择器1~选择器2
属性选择器
选着具有该属性的元素
[属性]
选择该属性并且值为指定的
[属性=属性值]
选择该属性并且值以指定开头的
[属性^=属性值]
选择该属性并且值以指定结尾的
[属性$=属性值]
选择该属性并且值包含指定值的
[属性*=属性值]
伪类选择器
是元素特殊状态的一种描述
动态伪类
没有访问过的a元素
a:link
访问过的a元素
a:visited
选中悬浮状态的a元素
a:hover
激活状态下的a元素
a:active
span也可以选中和激活
选中时的元素
表单类元素:focus
结构类
选中选择器中符合选择条件的第一个元素,符合条件的
选择器1 选择条件 类型:first-child
选中选择器中符合选择条件的最后一个元素,符合条件的
选择器1 选择条件 类型:last-child
选中选择器中符合选择条件的第n个元素,符合条件的
选择器1 选择条件 元素:nth-child(n)
n选择所有 n可以是公式,an+b的形式 even偶数
选中选择器中符合选择条件的第一个符合条件的类型
选择器1 选择条件 类型:first-of-type
选中选择器中符合选择条件的第n个符合条件的类型
选择器1 选择条件 类型:nth-of-type(n)
选中选择器中符合选择条件的倒数第n个符合条件的类型
选择器1 选择条件 类型:nth-last-of-type(n)
选中同类中只有该的元素
元素:only-child
选中同类中只有唯一的元素
元素:only-of-type
根元素
root
选中的是没有内容的元素
元素:empty
否定类
选择器 选择条件 元素:not(条件)
UI类
选中的元素
input:checked
选中被禁用的元素
input:disabled
选中的是可用的元素
inpuut:enabled
目标类
选中锚点所指向的元素
:target
语言类
选中该选择器指定语言的元素
:lang(语言)
伪元素选择器
选择元素中的第一个文字
元素::first-letter
选择第一行
元素::first-line
被鼠标选中的文字
::selection
在元素内容前添加内容
::before{content:"内容"}
在元素内容后添加内容
::after{content:"内容"}