偽類的使用

2021-08-21 09:56:48 字數 1192 閱讀 1439

優點:

1.不會增加js的dom負擔

2.不會增加瀏覽器對html的解析,加快瀏覽器載入html

3.對seo很有幫助

注意：img、input 不能有偽類

表單:focus 事件的使用

.input


:focus + div

:invalid 配合h5正則表單驗證

input


[type="email"]


:invalid + div
3. :checked 樣式顯示
input


[type="checkbox"]


:checked + div
4. :hover 常見的二級選單、tip框(下面**展示tip框實現)


span


[data-title]


span


[data-title]


:hover


:after


style>


hello,i'm qiphon . i'm from data-title="china">cnspan>.h1>
:checked (很少見的使用) counter 主要是和偽類同時使用



.choose


.choose


input


:checked


.counter


::before


style>


class="choose">


for="">


type="checkbox" >香蕉


label>


for="">


type="checkbox" >蘋果


label>


div>


你選擇了class="counter">


span>種水果


p>
##其它偽類
a:link /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */

a:hover /* 滑鼠移動到鏈結上 */

a:active /* 選定的鏈結 */

css hover偽類的使用

hover的使用，即當滑鼠指標移入元素時，所做出的樣式設定 doctype html html lang en head meta charset utf 8 title demo01 title style ul li ul li hover style head body ul li li li...

clear偽類使用

都知道float會脫離文件流 用什麼辦法撐開父元素呢？手動在本區塊的所有float元素之後加上乙個塊元素並對其新增clear both 可以 但是這樣還要再去修改html頁面 而且多了乙個僅僅是為了控制布局卻沒有實際表現意義的元素 不好.將float的父元素也設定為float 這樣會導致更深的問題 ...

前端筆記 偽類的使用

css3為了區分偽類和偽元素，偽元素採用雙冒號寫法。常見偽類 hover,link,active,target,not focus。常見偽元素 first letter,first line,before,after,selection。before和 after下特有的content，用於在css...