css选择器

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客
🔨🔨🔨  简介：CSDN前端领域优质创作者，资深前端开发工程师，专注前端开发，在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享，欢迎咨询交流，共同学习

🔔🔔🔔   感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。

目录

4. 伪类选择器

5. 伪元素选择器

---

 

4. 伪类选择器

伪类：不存在的类，特殊的类。用来描述一个元素的特殊状态如：第一个子元素、被点击的元素、鼠标移入的元素.…

伪类一般情况下都是使用：开头

• :first-child 第一个子元素
• :last-child 最后一个子元素
• :nth-child() 中间写数字表示对应的元素

n：第n个，n的范围0到正无穷

2n或even：选中偶数位的元素

2n+1或odd：选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序的

• :first-of-type同类型中的第一个子元素
• :last-of-type 同类型中的最后一个子元素
• :nth-of-type() 选中同类型中的第n个子元素

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的

• ：not 否定伪类，将符合条件的元素从选择器中去除

/* ul下第一个li，红色 */
ul>li:first-child {
  color: red;
}
 
/* ul下最后一个li，黄色 */
ul>li:last-child {
  color: orange;
}
 
/* ul下所有li，黑色 */
ul>li {
  color: black;
}
 
/* ul下第偶数个li，黄色 */
ul>li:nth-child(2n) {
  color: yellow;
}
 
/* ul下第奇数个li，绿色 */
ul>li:nth-child(odd) {
  color: green;
}
 
/* ul下除了第三个li，其余都是红色 */
ul>li:not(:nth-of-type(3)) {
  color: red;
}

• :link未访问的链接
• :visited已访问的链接

        由于隐私的原因，所以visited这个伪类只能修改链接的颜色

• :hover鼠标悬停的链接
• :active 鼠标点击的链接

a:link {
  color: red;
}
 
a:visited {
  color: yellow;
}
 
a:hover {
  color: green;
}
 
a:active {
  color: blue;
}

5. 伪元素选择器

 伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 :: 开头

• ::first-letter 表示第一个字目
• ::first-line表示第一行
• ::selection 表示选中的内容
• ::before元素的开始
• ::after元素的最后

        ::before和::after必须结合content属性来使用

/* 段落首字母设置大小为30px */
p::first-letter{
    font-size: 30px;
}
 
/* 段落第一行设置为黄色背景 */
p::first-line{
    background-color: yellow;
}
 
/* 段落选中的部分变绿色 */
p::selection{
    background-color: green；
}
 
/* div前加上内容 */
div::before{
    content: 'BEFORE';
    color: red;
}
 
/* div后加上内容 */
div::after{
    content: 'AFTER';
    color: blue;
}

css选择器_船长在船上的博客-CSDN博客

👉👉👉  欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。