css target 伪选择器放在外联样式相对路径引入会失效？

如图，我用css的伪选择器target写了一个手风琴的效果。
代码：
css：

/*手风琴效果2栏*/
.accordion {
    display: flex;
}
.accordion .tab {
    display: block;
    text-decoration: none;
    color: #eee;
    background: #6c6e74;
    height: 100px;
}
.accordion >div:target .tab {
    background: #a5cd4e;
}

.accordion>div:target {
    flex: 3;
}
.accordion > div {
    flex: 1;
    transition: flex .3s ease-in-out;
}

html：

<div class="accordion">
    <div id="tab-1">
        <a href="#tab-1" class="tab"></a>
    </div>
    <div id="tab-2">
        <a href="#tab-2" class="tab"></a>
    </div>
</div>

能正常使用。
但是奇怪的事情是这样的：

1. 把样式放在一个css的样式文件中，命名app.css
   

2. 在css文件夹同级目录的html文件中引入该app.css

<link rel="stylesheet" href="css/app.css">

3.效果正常

如果！！！！！
在其他目录的html中引用app.css
target选择器就会失效

1. 在news.html中引用app.css

<link href="../../css/app.css" rel="stylesheet" />

1. 正好是app.css中target选择器的样式没生效了

.accordion >div:target .tab {
    background: #a5cd4e;
}

.accordion>div:target {
    flex: 3;
}

得到效果：

这个问题怎么解决啊，求大神，我不想写在内联中，有办法吗？

---

你确定是路径问题吗，我测试没问题啊，只是初次黑屏，这是样式问题吧

---

谢谢大家的帮助，我已经解决了，并没有什么问题，导致失效是因为我用了MUI的框架，并且在脚本中在body范围进行了tap绑定，导致a标签的target无法使用，手动在url中加上#tab-1皆能看到效果。
然后我直接将mui("body")缩小到有效范围，避开整个页面注册事件就好了，谢谢大家的帮助！！！