CSS是一種基于選擇器來定義樣式的語言,img作為文檔中經常使用的元素之一,也可以通過不同的選擇器來進行樣式的定義。
/* 選擇所有img元素 */ img { border: 1px solid black; width: 100px; height: 100px; }
上述代碼中,img
作為選擇器,可以選擇文檔中所有的圖片元素,同時定義了圖片元素的邊框和寬高屬性。
/* 選擇某一個class為my-img的圖片元素 */ .my-img { border: 1px solid black; width: 100px; height: 100px; }
如果想選擇文檔中特定class名稱的圖片元素,可以使用.class
選擇器,并在類名前加.符號,例如.my-img
選擇器選中帶有class="my-img"
的圖片元素,并進行相應樣式的定義。
/* 選擇指定id為pic的圖片元素 */ #pic { border: 1px solid black; width: 100px; height: 100px; }
除了使用class選擇器,也可以使用id選擇器來選擇唯一的圖片元素,id選擇器使用#id
形式來定義,例如#pic
選擇器選中id="pic"
的圖片元素,并進行相應樣式的定義。
/* 選擇父元素為div的圖片元素 */ div >img { border: 1px solid black; width: 100px; height: 100px; }
有時候,我們需要選擇與某個父元素相關的圖片元素。這種情況下,可以使用父子選擇器,<父元素> > <子元素>
,例如
div > img
選擇器選中。除了上述選擇器之外,還有眾多選擇器可以用于選擇圖片元素,例如屬性選擇器、偽類選擇器等等,可以根據實際需求選擇適合的選擇器進行使用。