Question

我有以下代码：

<style>
.temp {
    transition:all 1s ease;
    opacity: 0;
    /* Don't forget the vendor specific pre-fixes! */
}

/* .temp:first-child{opacity: 1;} */

.temp:target {
    opacity: 1;
    font-size:40px;
}

#one:target {
  opacity: 1 ;
   font-size:40px
}
/*.tab:target ~ #one { opacity: 1;} */
</style>
<body>

<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<a href="#four">Four</a>

<div class="buttons">
    <div class="temp" id="one"> Number One</div>  
    <div class="temp" id="two">Number Two</div>  
    <div class="temp" id="three">Number Three</div>  
    <div class="temp" id="four">Number Four</div>
</div>

任务是使用css属性设置div #one的“默认”状态{opacity：1;}仅在页面加载时使用CSS。

我也找到了这个话题。 Default :target with CSS

此代码也很有效。

window.onload = function(){
    if(document.location.hash="#"){
        document.location.hash="#one";
    }
}

但是如果我有多个目标，不确定它是否适用于两个具有：目标状态的div。

有可能吗？感谢您的关注和解答。

CSS3默认：目标

0 个答案: