功能:选中想要添加样式的元素
注:选择器选择的是离大括号最近的元素,如果是那个元素,就添加,不是就不添加。
1、基础选择器
元素选择器 : 要选择的标记名
类选择器 :设定的class
ID选择器 :设定的id
通配符 :*
2、层次选择器
子级选择器 :父元素>子元素
后代选择器 :祖先元素 后代元素
兄弟选择器 : 兄弟元素A+兄弟元素B——特点:AB之间不能有其他元素(相邻)
通用选择器 : 兄弟元素A~兄弟元素B——特点:选择A之后所有的兄弟级元素B
否定选择器
:not()——小括号里是不想添加样式的元素
例:
:not(:nth-child(3)) 否定第三个元素
多个兄弟元素进行否定,则进行连续书写
例:
:not(:nth-child(3)):not(:nth-child(5))
3、伪类选择器
结构伪类选择器
:nth-child(n) ——匹配选择项父类下的第n个子项
:nth-of-type(n) ——匹配同类型的第n个元素
奇数项
:nth-child(odd)
:nth-child(2n+1)——此时的n默认取自然数
偶数项
:nth-child(even)
:nth-child(2n)
第一个
-
:first-child
:nth-child(1)
:nth-of-type(1)
最后一个
-
:last-child
:last-of-type
:nth-last-child(1) (从后往前数第一个)
:nth-last-of-type(1) (从后往前数第一个)
:only 只有一个元素
:empty 没有子元素
动态伪类选择器
:link——未访问
:visited——已访问
:focus——焦点、激活(键盘tab) 例:input\a
:hover——悬停
:active——点击时
4、伪元素选择器
::first-line——选中第一行
::first-letter——选中第一个字(中),选中第一个字母(英)
::after——在当前标签之前添加内容
::before——在当前标签之后添加内容
当前标签与::after和::before层次关系为父子级关系
当前标签是父元素
::after和::before是子元素
::selection——设定选中区域的样式(注:目前只能改变背景和字体颜色)
5、属性选择器
属性名=“属性值”
书写格式: 元素[属性名=“属性值”]
例:div[class=“box”]
选中属性以XXX开始的元素
书写格式: 元素[属性名^=“XXX”]
例:div[class^=“box”]
选中属性以XXX结束的元素
书写格式: 元素[属性名$=“XXX”]
例:div[class$=“box”]
选中属性包含XXX的元素
书写格式: 元素[属性名*=“XXX”]
例:div[class*=“box”]