默認情況下，將內容設置爲「隱藏」

Question

我想將以下內容設置爲默認隱藏。代碼工作正常，但它顯示所有的內容，當你登陸頁面。

.show { 
 
    display: none; 
 
} 
 

 
.hide:focus+.show { 
 
    display: inline; 
 
} 
 

 
.hide:focus { 
 
    display: none; 
 
} 
 

 
.hide:focus~#list { 
 
    display: none; 
 
} 
 

 
@media print { 
 
    .hide, 
 
    .show { 
 
    display: none; 
 
    } 
 
}

<p>Click below to learn how to access LearnHub and the services available to employees.</p> 
 
<div> 
 
    <a href="#" class="hide">[hide]</a> 
 
    <a href="#" class="show">[show]</a> 
 
    <ol id="list"> 
 
    <p> 
 
     <h2>How to access LearnHub</h2> 
 
     <p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p> 
 
    </ol> 
 
</div>

Answer 1

如果你想用的list的ID的元素是無形的頁面加載時，一個條目添加到該CSS其display屬性設置爲none。

#list {display:none;} 

您還需要添加的對立面或許多你目前已經制定了CSS規則的補充，如下面的代碼片段展示：

#list { 
 
    display: none; 
 
} 
 
.hide { 
 
    display: none; 
 
} 
 
.show:focus+.hide { 
 
    display: inline; 
 
} 
 
.show:focus { 
 
    display: none; 
 
} 
 
.show:focus~#list { 
 
    display: inline; 
 
} 
 
.hide:focus+.show { 
 
    display: inline; 
 
} 
 
.hide:focus { 
 
    display: none; 
 
} 
 
.hide:focus~#list { 
 
    display: none; 
 
}

<div> 
 
    <a href="#" class="show">[show]</a> 
 
    <a href="#" class="hide">[hide]</a> 
 
    <ol id="list"> 
 
    <p> 
 
     <h2>How to access LearnHub</h2> 
 
     <p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p> 
 
    </ol> 
 
</div>