CSS學習紀錄-05-class、id與複合選擇器(下)

css 學習筆記

joycechou_914 2024-05-21 13:48:19 ‧ 363 瀏覽

分享至

嗨嗨~我是914 今天也要來繼續學習class、id與複合選擇器囉GOGOGO

嗨嗨~我真的消失太久了QQ
請譴責我!今天也跟室友在這家二街咖啡一起做事
希望我們今天的目標都可以達成囉~
那今天這篇文章主要是補充上次的部分
那JS學習紀錄-06-其他運算子跟三元運算子也有新增:
i++跟++i的差異點
那我們就繼續開始來看囉~

否定選擇 :not(selector)
需要某選擇 A 範圍排除某選擇 B。

div:not(.odd) {
   color: blue;
}

nth-child 父層級下的所有子層級
:nth-child( an+b )
而odd跟even可以選取奇數跟偶數

nth-child
  
 <style>
        /* 選擇每個第二個段落 */
        p:nth-of-type(2) {
            color: red;
        }
        /* 選擇每個第三個段落 */
        p:nth-of-type(3) {
            color: green;
        }
        /* 選擇每個偶數段落 */
        p:nth-of-type(even) {
            background-color: #f0f0f0;
        }
        /* 選擇每個奇數段落 */
        p:nth-of-type(odd) {
            background-color: #cccccc;
        }
    </style>
</head>
<body>
    <div>
        <p>段落 1</p>
        <p>段落 2</p>
        <p>段落 3</p>
        <p>段落 4</p>
        <p>段落 5</p>
        <p>段落 6</p>
    </div>
</body>

我是超級新手，若有任何建議或是錯誤的部分，歡迎底下留言唷thanks
我們下篇文章見掰掰~