这里的li标签为什么必须使用交集选择器才能有效果？

这里的li标签为什么必须使用交集选择器才能有效果？

https://img1.sycdn.imooc.com//climg/62c68ec809ab35ca12721222.jpg

https://img1.sycdn.imooc.com//climg/62c68ec809d8869415261246.jpg
我记得类选择器的权限大于标签选择器啊，第一个li设置了class='current'


代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕课首页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/01-header.css">
    <link rel="stylesheet" href="./css/02-banner.css">
</head>
<body>
    <!--头部区域开始-->
    <head>
        <div id="header" class="bgfff">
            <div class="nav-box">
                <!-- log -->
                <h1 class="fl">
                    <a href="index.html">慕课网</a>
                </h1>
                <!-- 导航栏开始 -->
                <ul class="fl">
                    <li> <a href="#">免费课</a> </li>
                    <li> <a href="#">实战课</a> </li>
                    <li> <a href="#">体系课</a> </li>
                    <li> <a href="#">慕课教程</a> </li>
                    <li> <a href="#">专栏</a> </li>
                    <li> <a href="#">手记</a> </li>
                    <img id="img1" src="./images/new.png" alt="">
                    <img id="img2" src="./images/new.png" alt="">
                </ul>
                <!-- 导航栏结束 -->
                <!-- 搜索框开始 -->
                <div class="fl search">
                    <div>
                        <input type="text" placeholder="Java">
                        <a href=""><span class="iconfont icon-sousuo"></span></a>
                    </div>
                </div>
                <!-- 搜索框结束 -->
                <div class="login-area fr">
                    <a href="#">登录</a>|
                    <a href="#">注册</a>
                    <a href="#" class="shop-cart">
                        <span class="iconfont icon-tianchongxing-"></span>
                        我的课程
                    </a>
                    <span class="cart-num">7</span>
                </div>
            </div>
        </div>
    </head>
    <!--头部区域结束-->
 
    <!-- 课程分类和轮播图开始 -->
    <div id="banner">
        <div class="banner-box w">
            <div class="g-banner">
                <div class="course-list fl">
                    <ul>
                        <li>
                            <span class="title">前端开发：</span>
                            <span class="subtitle">HTML5/Vue.js/Node.js</span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">后端开发：</span>
                            <span class="subtitle">Java/Python/Go</span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">移动开发：</span>
                            <span class="subtitle">Flutter/Android/IOS</span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">计算机基础：</span>
                            <span class="subtitle">算法/数学/数据库</span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">前沿技术：</span>
                            <span class="subtitle">AI/大数据/数据分析</span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">测试运维：</span>
                            <span class="subtitle">自动化测试/容器</span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                        <li>
                            <span class="title">更多方向：</span>
                            <span class="subtitle">产品设计/UI设计/游戏</span>
                            <span class="iconfont icon-yousanjiao"></span>
                        </li>
                    </ul>
                </div>
                <div class="swiper fl">
                    <a href="#"></a>
                    <div class="arrow arrow-l">
                        <span class="iconfont icon-angle-left"></span>
                    </div>
                    <div class="arrow arrow-r">
                        <span class="iconfont icon-angle-right"></span>
                    </div>
                    <ul class="circle-list">
                        <li class="current"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="sys-class">体系课</div>
        </div>
    </div>
    <!-- 课程分类和轮播图结束 -->
 
    <script src="./js/index.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/* 整体布局开始 */
#banner {
    padding: 32px 0;
}
 
.banner-box {
    height: 482px;
}
 
.g-banner {
    height: 382px;
}
 
.sys-class {
    height: 100px;
    background-color: white;
    border-radius: 0 0 10px 10px;
}
 
.course-list {
    width: 256px;
    height: 382px;
    background-color: #39364D;
    border-radius: 10px 0 0 0;
}
 
.swiper {
    position: relative;
    width: 896px;
    height: 382px;
    border-radius: 0 10px 0 0;
}
/* 整体布局结束 */
 
/* 课程列表设置 */
.course-list li {
    height: 50px;
    padding: 0 10px;
    line-height: 50px;
    color: #eee;
}
 
.course-list li:hover {
    background-color: rgba(255, 255, 255, .1);
    cursor: pointer;
}
 
.course-list ul {
    margin-top: 20px;
}
 
.course-list .title {
    font-size: 14px;
}
 
.course-list .subtitle {
    font-size: 12px;
}
 
.course-list .icon-yousanjiao {
    float: right;
}
/* 课程列表设置结束 */
 
/* 轮播图 */
.swiper a {
    width: 896px;
    height: 382px;
    display: block;
    border-radius: 0 10px 0 0;
    background-image: url(../images/swiper/swiper-1.jpg);
    background-size: cover;
}
/* 轮播图结束 */
 
/* 箭头 */
.swiper .arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    line-height: 50px;
    background-color: rgba(255, 255, 255, .1);
}
 
.swiper .arrow:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, .1);
}
 
.swiper .iconfont {
    font-size: 35px;
    font-weight: 700;
}
 
.swiper .arrow-l {
    left: 10px;
    top: 160px;
}
 
.swiper .arrow-r {
    right: 10px;
    top: 160px;
}
/* 箭头结束 */
 
/* 切图按钮 */
.swiper .circle-list {
    position: absolute;
    right: 120px;
    bottom: 45px;
}
 
.swiper .circle-list li {
    float: left;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    background-color: #eee;
    border-radius: 50%;
}
 
.current {
    width: 20px;
    border-radius: 4px;
}
慕粉1555086949 2022-07-07
源自：前端综合案例-仿慕课首页   3-5 切图圆点
17
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕小尤 2022-07-07 17:42:53

同学你好，此处是为了设置圆点，样式并不会一直在一个li标签上，并在后续代码中会有多个class值为current。所以使用了交集选择器来进行元素的准确控制。

https://img1.sycdn.imooc.com//climg/62c6a92809ed0d9d15090704.jpg

祝学习愉快！

0
收起回答
  • 提问者 慕粉1555086949 #1

    但我设置css选择器的时候，直接用类名，设置了之后li没反应，打开控制台看，.current样式被划掉了。这是为什么
    如图所示https://img1.sycdn.imooc.com//climg/62c68ec809ab35ca12721222.jpg

    2022-07-07 18:04:32
  • 好帮手慕小尤 回复 提问者 慕粉1555086949 #2

    同学你好，在浏览器中可能是将.current中设置的样式，被.swiper .circle-list li设置的样式覆盖了，所以出现了下划线，从而导致没有生效。

    祝学习愉快！

    2022-07-07 18:30:33
  • 提问者 慕粉1555086949 回复 好帮手慕小尤 #3

    这里被覆盖了，是不是因为前面选择器的权重比.current的高？

    2022-07-07 19:02:03
点开查看后面1条评论
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

当使用交集选择器时，如果是两个标签相交则没有类名（没有前面的那个小点），vscode不认为这是交集选择器的情况怎么办？
30 3 3
请问老师，为什么使用全局选择器和p标签选择器都不对？
0 0 3
请问老师，标签选择器和全局选择器有什么区别？
2 0 5
CSS3选择器中的交集选择器和并集选择器有什么差别
19 0 3
老师，这个交集选择器什么意思？没听明白呀
3 0 2

登录后可查看更多问答，登录/注册

Java工程师
  • 参与学习           人
  • 提交作业       8745    份
  • 解答问题       9886    个

综合就业常年第一，编程排行常年霸榜，北上广深月薪过万！ 不需要基础，无需脱产即可学习，只要你有梦想，想高薪！ 全新升级：技术栈升级（包含VUE3.0，ES6，Git）+项目升级（前后端联调与功能升级）

了解课程

本课精华内容

问答 作业

eclipse打开弹出这样是怎么回事

79 1

找不到jdk版本号的文件夹，打开里面什么都没有

56 1

Cannot resolve symbol 'Valid'

10 1

spring boot 和swagger2版本冲突

14 1

Maven项目管理中，关于Maven和IDE有几点小疑问。

56 9

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码