選擇器

之前有介紹過選擇器，可參考以下連結，今天介紹後代選擇器

• type selector (標籤選擇器)：Day07
• Pseudo-classes (擬態選擇器)：Day07
• class selector (類別選擇器)：Day08
• id selector (ID 選擇器)：Day08

後代選擇器

• descendant selector：就如名字是在特徵內指定內部的子特徵或是類別等參數，再進一步設定需要的屬性
• 當我們在一個大段文章內，想要把連結都指定某個設定時，可以怎麼做呢？
  • 把每個連結都各自進行設定，但數量一多就難保不會有漏掉的
  • 把文章的這個區塊設定一個關於連結的後代選擇器，就可以省掉逐一設定的功夫

HTML

<div class="style">
    <h2>後代選擇器</h2>
    <a href="#">連結</a>
    <a href="#">連結</a>
    <a href="#">連結</a>
    <p class="test">段落1</p>
    <p>段落2</p>
</div>

CSS

.style{
    color: blue;
}
.style a{
    color: red;
}
.style .test{
    color: gray;
    font-weight: bold;
}

顯示結果如下

margin

• 產生特徵區塊外的邊界距離，我覺得就像 word 的版面設定一樣
• 內部的區塊元素會依照父元素(上一層)自適應延伸佔滿
• margin：值如 10px，會在上下左右都有 10px 的間隔
  • margin-top：只在上方有邊界
  • margin-bottom：只在下方有邊界
  • margin-left：只在左方有邊界
  • margin-right：只在右方有邊界

padding

• 產生特徵區塊內的空白距離，我覺得就像 word 的段落間距或行間距一樣
• padding：值如 10px，會在上下左右都有 10px 的留白
  • padding-top：只在上方有留白
  • padding-bottom：只在下方有留白
  • padding-left：只在左方有留白
  • padding-right：只在右方有留白

參考以下檔案，比較一下各區塊間設定的差異

HTML

<div class="box1">
    <h2>margin 與 padding</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
</div>
<div class="box2">
    <h2>margin 與 padding</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
</div>
<div class="box3">
    <h2>margin 與 padding</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Officia, nesciunt voluptates! Sapiente, at? Sit </p>
</div>

CSS

.box1 {
    border: 10px solid gray;
    margin-left: 20px;
    /* margin-bottom: 20px; */
    /* padding-left: 10px; */
    /* padding-bottom: 10px; */
}

.box2 {
    border: 10px solid gray;
    margin-left: 10px;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-bottom: 50px;
}
.box3 {
    border: 10px solid gray;
    margin: 20px;
    padding: 10px;
}

結果如下圖，比較 box1、box2、box3 之間設定不同的值，出現的差異會在哪個位置

臨時測試

在進行測試的時候想說怎麼都沒有照著設定的屬性顯示，可以看出下面的 CSS 哪邊出問題嗎？

style{
    color: blue;
}

答案明日公布

參考資料

• Day11-HTML元素邊界關係！margin、padding、border

次回

一樣是 HTML 和 CSS 的綜合介紹