CSS捉迷藏游戲可謂是前端面試經典問題之一,它可以檢驗面試者對于CSS選擇器的熟悉程度。其中,id選擇器作為CSS選擇器的基礎,也是我們必須掌握的內容之一。
#box { background-color: blue; width: 100px; height: 100px; position: relative; } #box:hover { background-color: red; } #box p { color: white; position: absolute; top: 50%; transform: translateY(-50%); text-align: center; }
以上是一個簡單的CSS捉迷藏游戲示例,我們使用id選擇器來定義box元素,它的背景色為藍色,大小為100px*100px,并且使用相對定位。當鼠標懸停在box上時,它的背景色會變為紅色。
同時,我們在box元素內部使用了p標簽來定義文字樣式。將p標簽的顏色設置為白色,使用絕對定位將其垂直居中,并且使用transform屬性來對其進行偏移,使其始終在box元素的中央。
通過掌握id選擇器的使用,我們可以在CSS捉迷藏游戲中“隱藏”特定的元素,并且通過使用偽類選擇器:hover來定義鼠標懸停時的效果。同時,我們也可以在元素內部使用其他選擇器來定義不同的樣式特征,從而使整個網頁看起來更加美觀。