HTML5中常见的选择器

功能:选中想要添加样式的元素
注:选择器选择的是离大括号最近的元素,如果是那个元素,就添加,不是就不添加。

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”]

猜你喜欢

转载自blog.csdn.net/xiao1642016021/article/details/106311978
今日推荐