笔记~27

任务C1-27：伪类选择器

任务背景

将伪类与选择器相结合，可以指定选择元素的特殊状态，也可以根据元素的所处的状态应用不同的样式，掌握伪类选择器可以帮助我们实现更加丰富的样式。

任务目标

掌握常用的伪类选择器

任务训练

常用的伪类

伪类 描述
: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）、公式

你是否认为最终效果是【C1见习能力认证】字体为红色？实际上所有内容字体都不会变红色
对于选择器【p:first-child】，需要同时满足两个要求：
该元素为p元素
该元素为该元素父级元素的第一个子元素
对于first-child、last-child、nth-child(n)、nth-last-child都存在此类情况，注意区分

练习题：

1.将最后一栏背景设置为灰色，补全横线处数字

<style>
      .item:nth-last-of-type(________){
      background-color:gray;
      }
      </style>
      <ulclass="list">
      <liclass="item">2</li>
      <liclass="item">3</li>
      <liclass="item">5</li>
      <liclass="item">6</li>
 </ul>

:nth-last-of-type(n)匹配属于其父元素的第N个指定类型的子元素，从最后一个子元素开始计数，
:nth-last-of-type(1)则可选取属于其父元素的最后一个li元素
答：1

2.划去内容不是质数的li，补全横线处数字

<style>
.item:nth-last-child(________){
text-decoration:line-through;
}
</style>
<ulclass="list">
<liclass="item">2</li>
<liclass="item">3</li>
<liclass="item">5</li>
<liclass="item">8</li>
</ul>
`答：1``
划去内容不是质数的li元素，首先判断哪个li元素的内容不是质数
上述代码最后一个li元素的内容为8不是质数，则要选取最后一个li元素
.item:nth-last-child(1)选择器选取的元素需要同时满足一下两个条件
该元素是其父元素的最后一个元素
该元素的类名为item``



3.a:________{text-decoration:none;}

答：hover