2017年8月7日 星期一

常常弄不清楚的 CSS Selector



CSS class definition with multiple identifiers

常常弄不清楚的 CSS Selector
  • .class1.class2 will match only the elements that have both of them classes defined.
    .class1.class2 { background: red; }
    <div class="class1 class2"></div>
  • .class1, .class2 will match the elements with .class1 or .class2
    .class1, .class2 { background: yellow; }
    <div class="class1"></div>
    <div class="class2"></div>
  • .class1 .class2 will match only the elements with class2 within elements with class1.
    .class1 .class2 { background: blue; }
    <div class="class1">
        <div class="class2"></div>
    </div>

善用工具: 

開Chrome瀏覽器 F12 開發者工具偵察現有的網頁 CSS 樣式規則,判斷產生該效果的 CSS 樣式設定來源



沒有留言 :

張貼留言