iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
1
自我挑戰組

網頁排版個人學習筆記系列 第 10

HTML&CSS| 選擇器大於的用法

前言

開始做整個網頁的撰寫後,ul li的排列方式續增→ menu選單/ 卡片排列方式 /卡片內的項目標籤..等。
當某個ul li沒有寫好連動到其他ul li們,就是集體大爆走的狀況,很~失~控,接著崩潰。冏!!
直到認識 css 選擇器,尬~救贖!!


CSS 選擇器

CSS 選擇器有很多種,這邊使用到複合選擇器中的直屬選擇器,大於(>)這個符號

  • 大於符號的選擇器使用方式 範例
    • .box>p
      只會影響.box下的直屬p元素
    • .box p
      .box內的每個p元素都會被影響
      https://ithelp.ithome.com.tw/upload/images/20190909/20119743Ir3lZTLHwQ.jpg
<style>
    .box p{
       color:#ff6768;/*粉色*/   
    }
    .inbox>p{
      color:#1ee3cf;/*綠色*/
    }
</style>
<body>
    <div class="box">
      <p>我是在.box內的p文字1</p>
      <p>我是在.box內的p文字2</p>
      <div class="inbox">
        <p>我是在.inbox內的P文字1</p>
        <p>我是在.inbox內的P文字2</p>
      </div>
      <p>我是在.box內的p文字3</p>
    </div>
    <p>我是.box外的文字</p>
<body>
  • ul li排列: 3張併排橫式卡片+卡片內項目標籤 範例
    • 範例中.cardlist>li就有使用大於選擇器。如果未使用第三個卡片內的項目標籤(.card3 ul)就會被影響

https://ithelp.ithome.com.tw/upload/images/20190909/20119743KS3eNkiXts.jpg


參考文章
W3school- CSS選擇器參考手冊
MDN web doc-CSS選擇器


上一篇
HTML&CSS|position 屬性
下一篇
Sublime 文字編輯器安裝與常用外掛
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言