CSS 選擇器 與 正則表示法

當我們在撰寫 CSS 樣式時，通常都是使用 id 或是 class 來當作選擇的選項，些時候以上兩種方式並沒有辦法滿足我們的需求，所以我們可以抓取 HTML attribute，或是使用正則表示法來抓取 HTML 元素。

範例

HTML 架構

<div class="wrap">
  <a href='/more'>read more</a>
  <div id="im-item1" class="item">item1</div>
  <div id="item2" class="item">item2</div>
  <div id="item3" class="item">item3</div>
  <input type="submit" name="submit" value="">
</div>

element、id、class

a{
color:green;
}

#im-item1{
color: red;
}

.item{
color:blue;
}

基本上這三種方式就可以處理大多數的情況，除非你運氣很不好需要用到以下更進階的技巧。

HTML attribute

input[type='submit']{
    background-color: green;
}

很少會有需要抓屬性來寫樣式的，到這裡基本上都還很好理解。

正則表示法

div[id^='im-']{
  border:1px solid ;
}

div[id$='2']{
  border:5px solid ;
}

div[id*='tem3']{
   border:5px solid #ccc;
}

div[id^='im-'][id$='item1']{
  width: 50px;
}

由上而下分別為開頭為im-、結尾2、包誇tem3、最後為混用的範例。

更多的選擇方式可以參考 這份文件 你如果問說為何需要這麽辛苦？去更改 HTML 架構就好了啊，當你遇上 Framework 無法自己更改架構的時候就只能出此下策了。