目录

往期回顾，专栏一览

伪类选择器

1、常用的伪类

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

💬题目01

💬题目02

💬题目04

💬题目05

往期回顾，专栏一览

🍉 JavaSE	🍋 AWT	🍑 数据结构
🍅 C1进阶之路	🍒 每日一练	🌽 代码报错
🍈 活动

🍹欢迎各路大佬来到 Nick 主页指点

☀️本期文章将学习 [C1进阶之路-Web基础] 伪类选择器，我是博主Nick。✨

✨我的博客主页：Nick_Bears 🌹꧔ꦿ

🌹꧔ꦿ博文内容如对您有所帮助，还请给个点赞 + 关注 + 收藏✨

    

🍋 注：资料来源于C1进阶考试资料  

伪类选择器

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

1、常用的伪类

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

p:first-child {color: red;}
CSDN能力认证中心
C1见习能力认证
C4专项能力认证
C5全栈能力认证

你是否认为最终效果是C1见习能力认证字体为红色？实际上所有内容字体都不会变红色

对于选择器p:first-child，需要同时满足两个要求：

• 该元素为p元素

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

对于first-child、last-child、nth-child(n)、nth-last-child都存在此类情况，注意区分

💬题目01

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

.item:nth-last-of-type(________) {background-color: gray;}
2
3
5
6

  

key：1

💬题目02

📝 要实现当鼠标悬停到a标签时移除下划线，请补齐选择器

a:________{text-decoration: none;}

 

key：hover

💬题目04

📝 需要将文本「C1见习能力认证」的字体颜色设置为红色，请补齐选择器

    p:nth-of-type(_____) { color: red;    }    
    
CSDN能力认证中心
    
C1见习能力认证
    
C4专项能力认证
    
C5全栈能力认证

   

key：1

💬题目05

📝 需要将所有内容为「CSDN」的文本的字体颜色设置为红色，请补齐选代码

    p:________(3n) { color: red;    }
    
CSDN能力认证
    
C1见习能力认证
    
C4专项能力认证
    
CSDN
    
C1见习能力认证
    
C4专项能力认证
    
CSDN
    
C1见习能力认证
    
C4专项能力认证
    
CSDN

   

key：nth-of-type