0
点赞
收藏
分享

微信扫一扫

[C1进阶之路-Web基础] 伪类选择器

金牛豆豆 2022-04-16 阅读 43

目录

往期回顾,专栏一览

伪类选择器

1、常用的伪类

2、例:有以下代码,判断最终的样式效果

💬题目01

💬题目02

💬题目04

💬题目05


          

伪类选择器

    

1、常用的伪类

伪类

描述
:hover用于设置鼠标悬停在元素上方时的样式
:focus用于设置元素获得焦点时的样式
:active用于设置元素被激活时(按下按键时、松开按键时)的样式
:link用于设置元素点击之前的样式(仅可用于a标签)
:visited用于设置被访问的元素的样式(仅可用于a标签)
:first-child用于选取属于其父元素的第一个子元素,且满足冒号前的基础选择器选取要求
:first-of-type用于选取属于其父元素的第一个特定类型的子元素
:last-child用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求
:last-of-type用于选取属于其父元素的最后一个特定类型的子元素
:nth-child(N)选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求,N可以为数字、关键字(odd / even)、公式(如:2n+1)
:nth-of-type(N)选择匹配属于其父元素的第N个指定类型的子元素,N可以为数字、关键字(odd / even)、公式
:nth-last-child(N)选择匹配属于其父元素的第N个子元素且满足基础选择器选取要求,从最后一个子元素开始计数,N可以为数字、关键字(odd / even)、公式
:nth-last-of-type(N)选择匹配属于其父元素的第N个指定类型的子元素,从最后一个子元素开始计数,N可以为数字、关键字(odd / even)、公式

    

2、例:有以下代码,判断最终的样式效果

<style>
p:first-child {
color: red;
}
</style>
<div>
<span>CSDN能力认证中心</span>
<p>C1见习能力认证</p>
<p>C4专项能力认证</p>
<p>C5全栈能力认证</p>
</div>
  • 该元素为p元素

  • 该元素为该元素父级元素的第一个子元素

   

💬题目01

     

💬题目02

     

💬题目04

     

💬题目05

举报

相关推荐

0 条评论