html - 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;
}

得到效果：

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

解决方案

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

这篇关于html - css target 伪选择器放在外联样式相对路径引入会失效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！