練習 - 選取器

已完成

在前一個的練習中，您已將樣式套用至 html 和 h1 等元素。 您經常需要在應用樣式時稍微狹窄一些。

在本練習中，您將為頁面上的社交媒體和體驗部分和鏈接設置樣式。

將樣式應用於類和ID

首先，您可以設置社交媒體和體驗部分的樣式。

1. 返回您在上一個練習中使用的 vscode.dev 視窗。

2. 在 index.html中，請注意 section 第 10 行 ID 為 social-media 的元素;您將 style 應用於此部分以將顏色設置為藍色。

3. 在 style.css 的結尾處，新增下列 CSS 以設定 social-media 元素的色彩：

   #social-media {
       color: blue;
   }
   

4. 頁面將更新，將社交媒體部分中的內容設置為藍色。

5. 在 index.html中，請注意第 28 行和第 32 行的兩個部分，其中包含類 體驗;將 style 應用於這些部分以將字體變為斜體。

6. 在 style.css 的結尾處，新增下列 CSS 以便為具有 experience 類別的元素修改字型：

   .experience {
       font-style: italic;
   }
   

7. 頁面將更新，將experience中的字體設置為italicized。

使用偽類設置連結樣式

許多 Web 開發人員都會變更頁面上超連結的色彩和樣式。 您將連結的顏色設置為綠色，並在使用者將滑鼠懸停在連結上時突出顯示連結。

1. 在 style.css 的結尾處，新增下列 CSS 以將連結設定為一律為綠色：

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. 頁面隨即更新，以將連結顯示為綠色。

3. 將下列 CSS 新增至 style.css 的結尾，以便當滑鼠停留在連結上方時醒目提示連結：

   a:hover {
       background-color: yellow;
   }
   

4. 將滑鼠停留在頁面的連結上方，並注意到連結會醒目提示。

檢閱

下列螢幕擷取畫面顯示您套用的 CSS 結果。 您已使用類別、識別碼和虛擬類別，將樣式套用至特定元素和元素的邏輯群組。