課時78 序選擇器下(掌握)

2022-08-18 02:39:09 字數 1372 閱讀 4726

:nth-child(odd)選中同級別中的所有奇數

:nth-child(even)選中同級別中的所有偶數

:nth-of-type(odd)選中同級別中的所有奇數

:nth-of-type(even)選中同級別中的所有偶數

如果從中還有一些其它的標籤,我們可以用這個選擇器

:nth-child(xn+y)

x和y是使用者自定義的,而n是乙個計數器,從0開始遞增

來看下面的例子

這個2n+1是什麼含義呢?這個含義非常簡單,它首先會看到這裡有多少個標籤,一看有11個標籤,所以這個n就是從0-11,它會依次用2乘以0-11,然後再加上1,第乙個就是2*0+1=1,那麼它就選中了第乙個;

第二個就是2*1+1=3,那麼它就選中了第三個;

依次類推。。。

如果我們現在有乙個需求,我想把所有3的倍數改變顏色,應該怎麼辦呢?

然後只要是3的倍數就改變顏色了,3,6,9

這個x,y 使用者自定義,然後它就會選中滿足你公式的這一行。

那麼,到現在為止,給大家補充了兩點內容

1.通過單詞選定同級別中所有奇數或者偶數

2.通過使用者自定義公式來選定

大家來看這個日曆就是用到了非常多的序選擇器,比如,我想選中28,29,30,31讓它們變為灰色,又選中6月1日,給它加上兒童節

但是這裡涉及到了乙個css盒子模型的乙個知識,我們暫時還做不了,我們可以等到學完了css盒模型我們再來做這個案例。

課時71 後代選擇器(掌握)

1.什麼是後代選擇器?作用 找到指定標籤的所有後代標籤,設定屬性。首先你要明確什麼是後代?你的兒子,孫子,重孫子等,只要有你的血脈的,都是你的後代。我們先來舉個例子 我們想讓div中的標籤變紅 1.用標籤選擇器可以做嗎?不可以,它會選中頁面上的所有p,包括div以外的 2.用id選擇器可以做嗎?可以...

課時80 屬性選擇器下(理解)

1.屬性選擇器的取值是以什麼開頭的 attirbute value css2 attribute value css3 怎麼輸出呢?按住shift鍵,再按住回車上面的鍵子 怎麼輸出呢?按住shift鍵,再按住數字6的鍵子 先找到所有的img標籤,再找到img標籤中有alt屬性,並且alt屬性是以ab...

課時74 交集選擇器(理解)

1.什麼是交集選擇器?我們首先了解一下什麼是交集 以前學數學的時候學過交集,其實這裡也是一樣 兩個集合有重複的部分就叫做交集 作用 給所有選擇器選中的標籤中,相交的那部分標籤設定屬性 格式 選擇器1選擇器2 屬性 值 注意點 1.選擇器和選擇器之間沒有任何連線符號 來看乙個案例 先找到p標籤,再找到...