當我們在撰寫 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 無法自己更改架構的時候就只能出此下策了。

Summary
CSS 選擇器 與 正則表示法
Article Name
CSS 選擇器 與 正則表示法
Description
當我們在撰寫 CSS 樣式時,通常都是使用 id 或是 class 來當作選擇的選項,些時候以上兩種方式並沒有辦法滿足我們的需求,所以我們可以抓取 HTML attribute,或是使用正則表示法來抓取 HTML 元素。
Author
Publisher Name
一群棒子

Facebook 功能: