目前分類：CSS (2)

瀏覽方式： 標題列表 簡短摘要
// 「>」 子代選擇器：選擇 一個元素 / 裡的第一個直接子元素 / class
// ul 裡面的第一個li
ul {
  & > li {
    color: blue;
  }
}
 
// 選擇 class .logo 裡面的第一個class .logo-title
.logo {
  & > .logo-title {
    color: blue;
  }
}
 
// 「+」 同層相鄰組合選擇器：選擇 同層的並緊接在後的元素 / class
// 選擇header 緊接在後的img
header {
  & + img {
    width: 100px;
  }
}
 
// 選擇 class .logo 緊接在後的class .logo-img
.logo {
  & + .logo-img {
    width: 100px;
  }
}
 
// 「~」 同層全體組合選擇器：選擇同層指定的元素 / class的後面所有元素 / class，不管它們之間隔了多少個其他元素 / class
// h1 同層後面所有的p
h1 {
  & ~ p {
    color: gray;
  }
}
 
// 選擇 class logo 同層後面所有的class .logo-title
.logo {
  & ~ .logo-title {
    color: gray;
  }
}
文章標籤
scss 選擇器

bingzhichen 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：CSS
▲top
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>
    <link rel="stylesheet" href="style.css">
</head>
(繼續閱讀...)
文章標籤
HTML CSS Grid

bingzhichen 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：CSS
▲top