web前端入門到實戰 HTML序選擇器上

2021-09-27 13:12:00 字數 1013 閱讀 8406

解釋css3 中新增的選擇器中最具有代表性的就是序選擇器,大致可以分為兩類:

(1)同級別的第幾個(2)同型別的第幾個

先寫乙個公共**

我是一梯隊

我是一梯隊

我是一梯隊

我是第二梯隊

我是第二梯隊

我是第二梯隊

1.選中同級別中的第乙個

標籤:first-child{屬性:值}

注意點:不區分型別,只管取第乙個,不管第乙個是什麼標籤

解釋:在同級別中只選取第乙個為h1標籤和div下的p標籤,然後在這些裡面只選p標籤,進行標紅。

2.選中同級別中同型別的第乙個

標籤:first-of-type
例子:

解釋:先選出所有的p標籤,然後在這些p標籤中每乙個同級別的在選出乙個。

3.選中同級別中的最後乙個

標籤:last-child
5.選中同級別中的第n個

標籤:nth-chirld(n):{屬性:值;}
6.選中同級別中同型別的第n個

標籤:nth-of-type(n):{屬性:值;}
7.選中同級別中的倒數第n個

標籤:nth-last-chirld(n):{屬性:值;}
8.選中同級別中同型別的倒數第n個

標籤:nth-last-of-type(n):{屬性:值;}

web前端入門到實戰 實現html頁面自動重新整理

使用場景 頁面需要定時重新整理,實時載入資料,需要實時檢視監控資料 h5中的websocket和sse可以實現區域性重新整理 一定時間之後跳轉到指定頁面 登入註冊之類 前端開發使用偽資料除錯html頁面 修改一些js的變數值,可以自動重新整理效果 示例 頁面自動重新整理注 其中10指每隔10秒重新整...

web前端入門到實戰 HTML屬性選擇器(下)

一 格式 標籤 屬性 值 1.屬性的取值是以什麼開頭的 attribute value css2 attribute value css3 兩者之間的區別 css2中只能找到value開頭,並且value是被 和其他內容隔開的 css3中只要是以value開頭的都可以找到,無論有沒有橫線隔開的 p ...

web前端入門到實戰 CSS多級選單

這是乙個相當炫的功能,讓網頁看起來像桌面程式,如window的開始選單。實現原理基本和純css相簿差不多,但要注意的事項比較多,讓我們一步步來吧。先來乙個非常簡單的一級選單與懸停效果。結構很熟悉吧,就是把原來放的地方換成文字而已。我還特意標出來了。接著下來的表現層 非常簡單。menu menu li...