Jquery中文網 www.4271936.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 css的偽類和偽元素理解

css的偽類和偽元素理解

發布時間:2020-05-08   編輯:www.4271936.live
jquery中文網為您提供css的偽類和偽元素理解等資源,歡迎您收藏本站,我們將為您提供最新的css的偽類和偽元素理解資源
本文章來為各位詳細的分析css的偽類和偽元素的一些知識點了,這些知識點對各位會有不少的朋友,有興趣的進來看看。


偽類和偽元素的理解

官方解釋

偽類一開始單單只是用來表示一些元素的動態狀態,典型的就是鏈接的各個狀態(LVHA)。隨后CSS2標準擴展了其概念范圍,使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類。

偽元素則代表了某個元素的子元素,這個子元素雖然在邏輯上存在,但卻并不實際存在于文檔樹中。

我自己的理解:

偽類,類,class是一個類,就類似class這樣,表示一些元素的狀態的,但是無須標識的分類。

偽元素,就是一個元素,類似p標簽元素,等等,邏輯上存在,但是實際并不存在在文檔樹中。

另外一個簡單的理解和區分就是:

偽類前面是一個冒號,為元素前面是兩個冒號。E:first-child 偽類,E::first-line為元素。

特殊情況::before 和 ::after 偽元素

before 和after是在元素前面和后面添加一些元素,因此是偽元素,CSS3選擇器中已經將其前面變為兩個冒號了。請看:w3cselect

問題來了,那么為什么我們平時用before和after前面就一個冒號?

當你看了css2選擇器就知道了,老的規范中,偽類和偽元素都用一個冒號,新規范為了區分,偽元素統一用兩個“::”,所以,大家注意了,往后在寫css3的時候,為元素要用兩個冒號,偽類用一個冒號。

偽類和偽元素的應用

我之前的css常用效果,講了一些。

像偽元素

::-webkit-scrollbar

::selection

::-webkit-input-placeholder

::after

等等。

偽元素中用的最多的要數::after和::before了

可以用這兩個偽元素做很多效果!

html

<a href="#">haorooms</a>
css

a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    color: #000;
    font-size: 32px;
    padding: 5px 10px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right:  -20px; }
其中content中可以用attr也可以用url

例如:

a::after { content:"(" attr(href) ")"; }
h1::before { content: url(logo.png); } 

偽類中用的最多的要數:nth-child()選擇器了,關于nth-child(),我們看下文

nth-child()瀏覽器支持

IE9及以上版本,火狐,谷歌,Safari ,Opera都支持!

定義和用法

:nth-child(n) 選擇器匹配屬于其父元素的第 n個子元素,不論元素的類型。

n 可以是數字、關鍵詞或公式。

例如:

p:nth-child(2)
{
background:#ff0000;
}

<body>

<h1>這是標題</h1>
<p>haorooms第一個段落。</p>
<p>haorooms第二個段落。</p>
<p>haorooms第三個段落。</p>
<p>haorooms第四個段落。</p>

</body>
上面這段代碼請問那個段落顏色是紅色的?

答案是“haorooms第一個段落。”顏色變成了紅色!

解釋::nth-child(n) 選擇器匹配屬于其父元素的第 n個子元素,不論元素的類型。p:nth-child(2),P標簽的父元素是body,body的第二個子元素是“haorooms第一個段落。”所以haorooms第一個段落顏色變為了紅色?。?!

注意

很多朋友經常把:nth-child() 和:nth-of-type()混淆。

CSS3 :nth-of-type() 選擇器的意思是“規定屬于其父元素的第二個 p 元素”

看下面的例子:

p:nth-of-type(2)
{
background:#ff0000;
}

<body>

<h1>這是標題</h1>
<p>haorooms第一個段落。</p>
<p>haorooms第二個段落。</p>
<p>haorooms第三個段落。</p>
<p>haorooms第四個段落。</p>

</body>
代碼一樣,我的樣式僅僅是把 p:nth-child(2)改成了 p:nth-of-type(2),現在就是“haorooms第二個段落。”顏色變成了紅色。

奇偶數匹配

現在開始說說我開通說的table的tr偶數行變色的問題了。

因為table的子元素一般是tr,不會有別的,所以可以用

tr:nth-child(odd) 與 tr:nth-child(even)

當然也可以用

tr:nth-of-type(odd) tr:nth-of-type(even)

分別匹配序號為奇數與偶數的元素。奇數(odd)與(2n 1)結果一樣;偶數(even)與(2n 0)及(2n)結果一樣。

倍數寫法

:nth-child(an) 【:nth-of-type(an)同理,不解釋】

匹配所有倍數為a的元素。其中參數an中的字母n不可缺省,它是倍數寫法的標志,如3n、5n。

例子:

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍數的LI的背景設為橙色*
延伸

:nth-child(2n 1), :nth-child(2n-3) , :nth-child(4n 3) ,還可以 :nth-child(-an b)也就是反向匹配。

總之,你可以用了:nth-child偽類,可以對多個標簽有規律的進行不同的顯示,顯示出CSS3的強大。css3需要多用,熟能生巧,在書寫的時候,經常會把一些css3的屬性忘掉,你可以多手寫幾遍。

您可能感興趣的文章:
jQuery 關于偽類選擇符的使用說明
讀jQuery之五(取DOM元素)
jquery CSS選擇器筆記
php環境中url偽靜態和Gzip同時開啟相關問題與解決辦法
Jquery 學習筆記(二)
讀jQuery之四(優雅的迭代)
jQuery 過濾not()與filter()實例代碼
javascript 獲取元素樣式技巧分析
JQUERY的屬性選擇符和自定義選擇符使用方法(二)
CSS 陰影效果(無需圖片即可實現)

[關閉]
微信下载APP完成任务如何赚钱 河南福彩22选五最新 福利彩票排列7 成都配资炒股骗局 pk10北京开奖直播视频 贵州快3遗漏一定牛 高中生怎样理财 四川快乐12今天开奖结 辽宁35选7中一等奖 今天的江苏快三开奖结果√ 股票指数期货定价分析研究