站長資訊網
在css中，可以利用visibility屬性實現父元素隱藏并且子元素顯示的效果，只需要給父元素添加“visibility:hidden”樣式、給子元素添加“visibility:visible”樣式即可。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css怎樣隱藏父元素顯示子元素
在css中想要實現隱藏父元素并且顯示子元素很簡單，只需要給父元素添加visibility:hidden樣式使其隱藏，再給子元素添加visibility:visible樣式使其顯示出來即可。
下面我們通過示例來看一下，示例如下：
<!DOCTYPE html> <html> <head> </head> <body> <div style="height:50px;width:300px;border:1px solid black;background-color:yellow;"> <p>1231231231231325654654635165</p> </div> </body> </html>
輸出結果：
當給父元素子元素添加樣式之后：
<!DOCTYPE html> <html> <head> <style> div{ visibility:hidden; } p{ visibility:visible; } </style> </head> <body> <div style="height:50px;width:300px;border:1px solid black;background-color:yellow;"> <p>1231231231231325654654635165</p> </div> </body> </html>
輸出結果：
上述示例便是父元素隱藏子元素顯示的情況。
（學習視頻分享：css視頻教程）
