偽類常見用法及動態更改內容 樣式的方法

2022-07-30 17:27:10 字數 1304 閱讀 3292

偽類after等常用來清除浮動、增加附加內容,利用偽類常會減少div容器的使用,使得我們的頁面內容結構清晰。

本文將會簡介偽類的常見用法,並以jquery為例詳述如何動態更改偽類內容(content)偽類樣式

一、常見用法

1.1 清除浮動

<

div

class

="my-container"

>

<

div>內容1

div>

<

div

class

="sec"

data-attr

='前之啊是'

>內容2

div>

<

div>內容3

div>

div>

.my-container:after

.my-container>div

1.2 增加附加內容

.my-container>div:after

二、動態改樣式

/*

1. 新增樣式表法

*/

/*2. 更改class法

*/$(".sec").removeclass('sec').addclass('sec_new');

上述方法ⅰ是新增樣式表,該法支援動態新寫入的樣式,而後者則較適用已知樣式只需更改類即可;

三、動態改內容

內容content支援直接寫入css字串,也可在css content中寫入變數attr中,將值傳入html便簽中。

css樣式:

.my-container>div:after 

.sec:before

html:

內容1

內容2內容3

動態修改:

$(".sec_new").attr("data-attr",'修改後字首');
效果:

CSS動態偽類

偽類 說明 link visited 偽類說明 focus 指代當前獲得輸入焦點的元素,即可以接收鍵盤輸入或以某種方式啟用 hover 指代滑鼠指標放置其上的元素,例如滑鼠指標懸停在超連結上 active 指代由使用者輸入啟用的元素,例如使用者單機超連結時按下滑鼠按鍵的那段時間 a link a v...

CSS偽類 動態鏈結

偽類可以看做是一種特殊的類選擇符,是能被支援css的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈結在不同狀態下定義不同的樣式效果。1.語法 selector pseudo class 選擇符 偽類 偽類和類不同,是css已經定義好的,不能象類選擇符一樣隨意用別的名字,根據上面的語法可以解...

apache偽靜規則及常見規則用法例項

apache mod rewrite模組提供了乙個基於正規表示式分析器的重寫引擎來實時重寫url請求。它支援每個完整規則可以擁有不限數量的子規則以及附加條件規則的靈活而且強大的url操作機制。此url操作可以依賴於各種測試,比如伺服器變數 環境變數 http頭 時間標記,甚至各種格式的用於匹配url...