原創部落格 /

CSS Selector 種類簡介

上一篇
下一篇
本文
目錄
CSS Selector 種類簡介

其實學習 網頁樣式表(CSS) 不難,只不過很多時後真的要遇到實際的需求才會發現 CSS 好用的地方,當然很多書本上對於 CSS Selector 的部份其實沒有交代的很清楚,由其是在以前 CSS 書很少的時代,所以魚戀把CSS Selector整理了一下與大家分享。

CSS Selector 又稱為樣式選取器,也就是你希望 CSS 所顯示出來的效果要套用在哪些網頁元件上,有那麼多的網頁元素,要如何簡潔有效的套用上樣式, Selector 的善用功力就是關鍵!

魚戀會設計一些範例,用來解釋 Selector 的用法,網頁元素碼就是寫在 .HTML 檔裡的東東,選取器就是寫在 .CSS 或是在 <style> 標籤裡的東東嚕!

選取器Selector 大約分成以下幾種:

Class selectors
網頁元素碼:<div class="myID">選我</div>
選取器寫法:.myID {樣式:屬性;}
ID selectors
網頁元素碼:<div id="myID">選我</div>
選取器寫法:#myID {樣式:屬性;}
Type selectors(類型)
網頁元素碼:<div>選我</div>
選取器寫法:div {樣式:屬性;}
Universal selector(全域)
網頁元素碼:網頁內所有元素都會套用設定
選取器寫法:* {樣式:屬性;}
Attribute selectors(屬性器)
網頁元素碼:<div title="myTitle">選我</div>
選取器寫法:div[title] {樣式:屬性;} 只要含有屬性就可以了。
選取器寫法:div[title=myTitle]{樣式:屬性;}屬性的值必需相同才可以。
選取器寫法:div[title~=my]{樣式:屬性;}屬性的值中部份符合就可以了。
Descendant combinator(後代)
網頁元素碼:<div><span>選我</span><p>我沒被選</p></div>
選取器寫法:div span {樣式:屬性;}
Child combinator(子元素)
網頁元素碼:<div><span>選我</span><p><span>我沒被選</span></p></div>
選取器寫法:div > span {樣式:屬性;} 同樣是 span 但兩者必須為父子關係才有效。
Adjacent sibling combinator(同層相鄰元素)
網頁元素碼:<p>我沒被選</p><div></div><span>選我</span><span>我沒被選</span>
選取器寫法:div + span {樣式:屬性;}
General sibling combinator(所有同層元素)
網頁元素碼:<div></div><span>選我</span><span>選我</span><p>我沒被選</p>
選取器寫法:div ~ span {樣式:屬性;}
Pseudo-classes(偽類)
Pseudo 又可分為很多種:
  1. :link (連結平常的樣式)
  2. :visited (連結查閱後的樣式)
  3. :hover (滑鼠滑入的樣式)
  4. :active (滑鼠按下的樣式)
  5. :focus (目標為焦點的樣式)
  6. :lang(X) (當語言為 X 的樣式)
  7. :first-child (第一個元素的樣式)
網頁元素碼:<div></div>
選取器寫法:div:link{樣式:屬性;} 以連結平常的樣式為例!
選取器寫法:div:hover{樣式:屬性;} 以滑鼠滑入的樣式為例!
Pseudo-elements(偽元素)
這邊的偽元素選取器其實還有蠻多的,但這兩個是比較常用的:
  1. :first-line (元素的第一行)
  2. :first-letter (元素的第一個字母)
網頁元素碼:<div></div>
選取器寫法:div:first-line{樣式:屬性;}

Groups of selectors(群組)
用來同時指定多個 Selector 選取器統一定義樣式。
網頁元素碼:<div></div><p></p><span id="myID"></span>
選取器寫法:div , p , #myID{樣式:屬性;}

以上的選取器 Selector 基本上是可以交互使用的,比如說你可以用ID selectors 配合Descendant combinator:

網頁元素碼:<div id='myID'><span>選我</span><p>我沒被選</p></div>
選取器寫法:#myID span {樣式:屬性;}

so! 有沒有很簡單的一目了然!

  • 本文投稿至羊皮紙論壇 «CSS»
  • 本文為原創文章, 為尊重著作權, 未經作者同意請勿任意轉載
  • 關鍵字 : 樣式(23), 屬性(18), 選取器寫法(16), 網頁元素碼(13), selectors(6), Selector(6), combinator(5), 元素(4), title(4), first(4), Pseudo(3), 第一(2), 樣式為例(2), sibling(2), myTitle(2), hover(2), 魚戀把CSS(1), 類型(1), 關鍵(1), 部份其實(1)
0 0
2011-08-26T15:48:00+0000

發表迴響
 
驗證字串

  • 魚戀秋波 Neil Y.K.的部落格
    • 心情‧日記
      • 真情告白
        • 我是個男生,也是個女生
        • 等著走進我的世界
        • 翻過這個章節別再連絡了
        • 凝結的記憶
        • 我愛我親愛的你們
        • 真心它去了哪裡
        • 給認識我卻不懂得我的人
        • 就這樣了
        • 徹徹底底的失望
        • 我會靜靜的等著
        • 值得一生守侯的人
        • 我的告白
        • 我知道妳的心意
      • 2017日記
        • 許久的老筆記
        • 小奸小惡能夠影響什麼?!
        • 2017 嵐魚窩
      • 2014日記
        • 我的 Honda K7 維修記
        • 摩斯電碼
        • 嵐魚窩2013尾牙餐聚
      • 2013日記
        • 星空蝶戀生日派對花絮
        • 嵐魚窩-櫻花生日小派對
        • 2013 星空蝶戀生日派對規劃
      • 2012日記
        • 從一則評論,學習眼的角度
        • 從天而降的小斑鳩
        • 午後的異想世界
        • 嵐魚窩2012
        • 咪奧
      • 2011日記
        • 陪伴整個十月的日出
        • 入圍第六屆全球華文部落格大獎
        • 跨越 2011
        • 狼不可怕
        • 2010 秋冬置裝造型 Winter Style
        • 心想事成 All wishes will come true
        • 美人魚游法
        • 需要好好休息一下
        • 補眠嚕
        • 充實的一天
        • 戒不掉的好習慣
        • 亂七八糟的夢
        • 混亂的日子
        • 驚奇三月
        • 不要再掛了!
        • 喜歡冒險的人
        • 今日諸事不順
        • 看!流星!
        • 雙手
        • The sigil
        • 現金流遊戲
        • 哈哈哈~男人呀
        • 魚戀的小窩 - 小餐廳
        • 魚戀秋波中文 Logo
        • 最不解了的人
        • Goodbye my dear
        • 新的日記本啟用!
        • 我的 410 寶貝
        • 新計畫要開始了
        • 討人厭的網路蟑螂
        • 驚! 發現自己的作品被盜用
        • 阿姨~錢很難賺!不要這樣啦~
        • 無奈的眼神
        • 那個名叫 L 的女孩
        • 週一的夜晚
        • 其實人類是外星產物
        • 大愛劇場-再牽你的手
        • 相信
        • 玫瑰魔法
        • 一首好久以前寫的歌
        • 關鍵時刻
        • An old building coffee shop
        • 迷失
        • 善解
      • 2003日記
        • Trip to Hawlien
        • A cold night
        • 城市光廊
        • 洗腦
        • 姊姊失戀了
        • 她的生日
        • 國際煙火節
        • 大腦假
        • 金錢
        • 了解一個人
        • 週而復始
        • 愛情?
        • 雙魚
        • 狂暴
        • 告訴我
        • 難喝的咖啡
        • 結局
        • 無奈
        • 貝禮斯
        • 敗家
        • 貴婦
        • 磨豆子
        • 時間與生命的空間意義
        • 換個心情
        • 無法呼吸
        • 分享
        • 情人節
        • 生存遊戲
        • 幸福
        • 被困在書海中
        • Deep breathe
        • 溺水的魚
        • 快樂
        • 今世獨欲逄得諸人
        • 自撰
        • 等待
        • 失戀
        • 孤獨
        • 我在微笑
        • Bed Spirit
        • Taipei Mainstation
    • 創作
      • 繪圖
        • 你真的知道網路是什麼嗎?
      • 攝影
        • 旗津夕陽
        • 樹的生命力
        • 向日葵
        • 高雄大八餐聚
        • Tasty Kaohsiung
        • 白色聖誕樹
      • 素描
        • 剪影夕陽
        • 我愛海洋與浪花
        • 封存
        • 倫敦鐵橋
        • 等待
        • 兩面之緣
        • 花蓮南濱
        • 花蓮美崙飯店
        • 安平夕陽
        • 旗津燈塔
        • 幽會的情侶
        • 牽手
      • 水草情迷
        • 我的水草魚缸
      • 舞動程序
        • 關鍵詞庫系統搜尋及應用設計
        • 鍵盤測試工具
        • 宅配物流系統
        • 中文判定及轉換程式
        • 圖片裁切控制介面 ScaleFrame
        • 線上名片設計程式
        • 讓列表像瀑布一樣的 Puzzle 模組
        • 商品特徵設定程式
        • 網路履歷程式
        • 整合搜尋模組
        • 全球地理管理工具
        • 傳說中 IE 消失的文字
        • 全球化地理系統
        • 網頁輪播模組
        • 黑族塔羅牌陣程式
        • 英文地址轉換程式英文地址轉換程式
        • 黑族紙娃娃系統黑族紙娃娃系統
        • 索引地圖建立工具
        • 推薦好用的文字編輯器
        • JScript 事件的共用
        • 設定 PHP 檔案上傳容量限制
        • 許久不見的偵錯模式
        • 解決 Flash 無法在原網頁開啟連結
        • 雷達圖產生程式
        • 相片雜湊工具
        • Facebook 網站應用
        • 自創的防木馬登入網頁
      • 文學
        • 愛不能複製也不能拷貝
        • 不懂
        • 未完成的新作品
        • 眼裡掩不住的震撼
        • 2010 旗津夕陽之美
        • 人生‧玄機
        • 白黑天使
        • 飛翔
        • 曖昧咖啡
        • 天籟之音
        • 風兒是上帝的天使
        • 鋁線創意(蜻蜓)
        • 海底世界佈景
        • 了解
        • 記得了就忘了
        • 角度
        • 完整
        • 幸福玉米田
        • 落翼
        • 打油詩
        • 魚戀秋波語錄
    • 我的工作
      • 電腦維修
        • 鐘王牌高功率擴音機維修
        • SONY Z3 觸控故障維修
        • HTC M8 螢幕破裂維修
        • Samsung P2370 維修
        • Necvox HQ1.2 汽車音響維修
        • ASUS F81S 開機三秒斷電、無法開機維修
        • PaPaGo 更換電池
        • Samsung Galaxy Tab4 維修
        • Lenovo G450 電池維修
        • 工業熨斗維修
        • 維修 Dennys MD-230 DVD Player
        • 小米 Note2 充電座維修
        • HTC OneX 故障檢修
        • LCD 螢幕修理
        • 征服 Windows 7
        • 電腦維修 - 筆記型電腦電源故障修復
        • 資料救援 - 硬碟資料救援
        • 接案:電腦資料救援
      • 商業美工
        • 商業美工 - 黛夫人晚宴禮服
      • 接案工程
        • 模型加速器推捍
        • 居家網路建置
        • 網路規劃 - 拾穗社區網路建置案
      • 備忘錄
        • Windows 7 免重裝切換 AHCI 模式
        • CentOS 筆記
        • Win7 備忘錄
        • 清除系統垃圾
        • Mysql 備忘錄
        • CSS 陰影效果
        • JScript 備忘錄
        • CSS 設計備忘錄
        • PHP 程式備忘錄
        • Linux shell 筆記
        • Apache 架設備忘錄
        • CSS Selector 種類簡介
      • 黑族
        • 黑族網站系統搜尋最佳化 SEO
        • 黑族在地生活介紹-商家篇
        • 黑族世界地圖繪製
        • 黑族在地生活傳單
        • 盧恩符文圖示
        • 2012 黑族新名片
        • 黑族KTV 點歌簿教學
        • 在地生活邀請信件
        • 終於有國際加密認證了!
    • 雜七雜八DIY
      • K7 時速感測器更換
      • 更換 LED 剎車燈,故障檢測電路修改
      • K7 發電機更換
      • 廢棄餐桌變身和室桌大改造
      • 咔辣姆久變身花器
      • 自製魚窩溫泉
      • 破舊的小檯燈大改造
      • 螢光立燈改造遙控調光 LED 燈
      • 星戰的語音感應器設計 商店推薦
      • 模組化 LED 燈設計 商店推薦
      • 愛車內裝改造 DIY
      • DIY 蜂巢零件櫃
      • 小沙發的新衣
      • 第二代伺服器散熱機櫃 DIY 投稿文章
      • 自製木工裁桌 DIY 投稿文章
      • 屬於自己的盧恩符文 投稿文章
      • 占卜與鬆餅海報 商店推薦
      • 杏仁瓦片餅乾 投稿文章
      • 逆電流實作 投稿文章 商店推薦
      • 小綿羊大解體
      • 特殊尺寸讓電腦維修困難 投稿文章 商店推薦
      • 自己剪頭髮
      • 驚人的可頌
      • 不小心掛掉的硬碟
      • 飛瑞UPS改裝 商店推薦
    • 流浪札記
      • 小烏來風動石它滾了!!!
      • 軒尼詩炫音派對
      • 屋頂酒吧
      • Doulos 忠僕號
      • 澎湖玩瘋樂
      • 南橫露營囉
      • L 的公司旅遊
      • 綠世界生態農場
      • 雲門 cafe Taipei
      • Cold Taipei
    • 玩樂情報
      • 10/27 LAMP萬聖惡靈派對
      • 紙牌遊戲 - 妙語說書人 投稿文章
      • 紙牌遊戲 - 諜影危機 投稿文章
      • 左營三牛牛肉麵 商店推薦
      • 異國風燈塔美式酒館 投稿文章 商店推薦
      • 我的香港首航
      • 我的香港首航 - 道具篇 投稿文章
      • 魔獸爭霸之信長野望
    • 生活話題
      • 台灣選民們,到底想怎麼樣?!
      • 2020 民主價值
      • 2020 民主台灣
      • 解決台灣的亂象,不是換個政治人物做看看,而是人民要換個腦袋
      • 馬英九與王金平的九月政爭 投稿文章
      • 智慧型手機我怎麼選
      • 我們社會的病源在哪
      • 要照顧肯為你賣命的伙伴
      • 歐巴桑的環保
      • 排放廚房油煙要罰款
    • 經方中醫
      • H1N1疫苗風波與社會問題
      • 傷寒雜病論
      • 看到快吐血的猪流感專訪
      • 施打疫苗、終身受害
      • 救人還得看緣份
      • 只有感慨
      • 看不清事實的人
      • 送孩子受教育幹什麼!
      • 發燒處理不當變癌症
    • 未分類

    部落格列表