伪类选择器

最后都变了- 提交于 2019-12-01 07:42:54

1、:hover

  鼠标悬停在标签上方时触发hover样式,适用于所有标签

2、:active

  鼠标点击标签未松开时触发active样式,适用于所有标签

3、:checked

  当标签被选中时触发checked样式,适用于radio(单选按钮),checkbox(复选框),或者option(select中的一项)

4、:focus

  当标签获得焦点时触发focus样式,适用于input、button

5、:focus-within

  当标签获得焦点或该标签的后代标签获得焦点时触发此样式,适用于后代标签是input标签、button标签的标签

6、::placeholder

  设置占位符中字体的样式

  iuput::placeholder{

    font-size:14px

  }

7、:first-child

  表示在一组兄弟标签中的第一个标签

  :first-child

  表示在一组兄弟标签中的最后一个标签

  例如:

  div p:first-child{
    color: red;
  }

  div p:first-child{
    color: blue;
  }

<div>
  <p>1111111</p>
  <p>2222222</p>
  <p>3333333</p>
  <p>4444444</p>
  <p>5555555</p>
</div>

8、:nth-child(an+b)

  a和b是自己定义的整数,(n=0,1,2,3...)

  表示匹配an+b行

  :nth-child(odd)

  表示匹配奇数行

  :nth-child(even)

  表示匹配偶数行

  :nth-child(-n+3)

  表示匹配前三个标签

  :nth-child(2)

  表示匹配第二个标签

 9、p:first-of-type

  选择类型是p标签的第一个p标签

  p:last-of-type

  选择类型是p标签的最后一个p标签

  例如:

div p:first-of-type{
  color: red;
}
div p:last-of-type{
  color: blue;
}

<div>
  <p>1111111</p>
  <b>2222222</b>
  <p>3333333</p>
  <i>4444444</i>
  <p>5555555</p>
  <span>66666666666</span>
</div>

10、p:nth-of-type(an+b)

  a和b是自己定义的整数,(n=0,1,2,3...)

  表示匹配类型是p标签的第an+b行

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!