$(".XXX").removeClass(".current")
$(this).addClass(".current")
))
一般这样就能解决问题了
先点击你选择的，所有的.XXX的class 取消.current（class），然后给当前的div添加.XXX（class）
【这是我的学习笔记，你也可以拿去用】
1 元素选择器：比如p{xxxx}，选择文档中所有的p元素；
2 类选择器：比如.center_bar{xxxx}，选择文档中使用了类center_bar的元素；
3 id选择器：比如.button1{xxxx}，选择文档中使用了button1的元素；
4 或选择器：用逗号连接多个选择器；
5 与选择器：多个选择器紧挨在一起；
6 后代选择器：用空格连接多个选择器；
7 子代选择器：用大于号连接多个选择器，它其实是后代选择器的特殊情况；
8 属性选择器：
(1) 比如p[id]，选择标签上有属性“id”的p元素；
(2) 比如p[id="button1"]，选择标签上有属性“id”并且id的值为“button1”的p元素；
(3) 比如p[id^=”b”]，选择标签上有属性“id”并且id的值以“b”开头的p元素；
(4) 比如p[id$=”b”]，选择标签上有属性“id”并且id的值以“b”结尾的p元素；
(5) 比如p[id*=”b”]，选择标签上有属性“id”并且id的值包含“b”的p元素；
9 p:first-child：既是p元素，也是某元素的第一个孩子；
10 p:last-child：既是p元素，也是某元素的最后一个孩子；
11 p:nth-child(3)：既是p元素，也是某元素的第三个孩子；
12 p:nth-child(odd)：既是p元素，也是某元素的第奇数个孩子；
13 伪类选择器都是某种状态，比如active、link、hover，使用“:”；
14 伪元素选择器，确实有某些实体的东西，比如第一行文字、第一个文字、被选中的文字，使用“::”
15 只有多个选择器选中了同一个元素的同一个属性，才会出现优先级的问题；
16 如果两个选择器优先级相同，那么写在后面的选择器生效；
17 选择器优先级的排列：
(1) !important
(2) 内联样式
(3) id选择器
(4) 类和伪类选择器
(5) 元素和伪元素选择器
(6) *选择器
(7) 继承样式
11-css3新增选择器 原创2022-08-06 17:02:22
CapejasmineY
码龄4年
关注
文章目录
一、渐进增强和优雅降级
二、层级选择器
三、属性选择器
四、伪类选择器
1、结构伪类选择器
2、目标伪类选择器
3、UI元素状态伪类选择器
4、否定伪类选择器
5、动态伪类选择器
一、渐进增强和优雅降级
**渐进增强：**针对低版本浏览器进行构建页面，保证最基本功能。在针对高版本浏览器进行效果、互动等改进和追加功能，达到更好的体验。
**优雅降级：**一开始就构建完整的功能，然后针对低版本进行兼容。
二、层级选择器
三、属性选择器
四、伪类选择器
1、结构伪类选择器
在这里插入图片描述
例子：
2、目标伪类选择器
用法：
目标伪类选择器是结合锚点用的（就这一个用法）
锚点通过a标签设置href为“#xxx”的url，来跳转到标签x，id=“xxx”的块中，实现被跳转的标签元素有URL指向。当点击a链接时会跳转到x标签页面上（url指向该标签处）并触发x:target属性。
