常常弄不清楚的 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 樣式設定來源