css引入僞類和僞元素概念是爲了格式化文檔樹以外的信息。
僞元素&僞類:
-
css引入僞類和僞元素概念是爲了格式化文檔樹以外的信息。也就是說
,僞類和僞元素是用來修飾不在文檔樹中的部分;
比如,一句話中的第一個字母,或者是列表中的第一個元素。下面分別對僞類和僞元素進行解釋: -
僞類用於當已有元素處於的某個狀態時,爲其添加對應的樣式,
這個狀態是根據用戶行爲而動態變化的
。比如說,當用戶懸停在指定的元素時,我們可以通過:hover來描述這個元素的狀態
。雖然它和普通的css類相似,可以爲已有的元素添加樣式,但是它只有處於dom樹無法描述的狀態下才能爲元素添加樣式,所以將其稱爲僞類。 -
僞元素
用於創建一些不在文檔樹中的元素
,併爲其添加樣式。比如說,我們可以通過:before來在一個元素前增加一些文本,併爲這些文本添加樣式
。雖然用戶可以看到這些文本,但是這些文本實際上不在文檔樹中。
僞元素&僞類的特點:
- 僞元素和僞類都不會出現在源文檔或者文檔樹中
- 僞類允許出現在選擇器的任何位置,而一個僞元素只能跟在選擇器的最後一個簡單選擇器後面
- 僞元素名和僞類名都是大小寫不敏感的
- 有些僞類是互斥的,而其它的可以同時用在一個元素上。(在規則衝突的情況下,常規層疊順序決定結果)。
僞元素和僞類的區別:
僞類的操作對象是文檔樹中已有的元素
,而僞元素則創建了一個文檔數外的元素
。因此,僞類與僞元素的區別在於:有沒有創建一個文檔樹之外的元素。
僞元素:
- 僞元素用於創建一些不在文檔樹中的元素併爲其添加樣式。
單雙冒號: - E::before/E:before在E元素內部創建一個行內元素,作爲E的第一個孩子,需要使用content屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中;
- E::after/E:after 在E元素內部創建一個行內元素,作爲E的最後一個孩子,其用法和特性與:before相似;
- E::first-letter/E:first-letter匹配E元素內容的第一個字母,被修飾的首字母不在文檔樹中;
- E::first-lineE/:first-line 匹配E元素內容的第一行,這個僞元素只能用在塊元素中,不能用在內聯元素中
雙冒號:
- E::selection應用於文檔中被用戶高亮的部分(比如使用鼠標或其他選擇設備選中的部分)改變字體大小,添加背景色等等,在火狐瀏覽器使用時需要添加-moz前綴。該僞元素只支持雙冒號的形式;
::-moz-selection {
color: orange;
background: #333;
}
::selection {
color: orange;
background: #333;
}
- E::placeholder匹配佔位符的文本,只有元素設置了placeholder屬性時,該僞元素才能生效;用於修改input默認的灰色文字的樣式,字體大小和字體顏色等等;爲了瀏覽器兼容性,一般寫爲: input::-webkit-input-placeholder,
該僞元素不是CSS的標準,它的實現可能在將來會有所改變,所以要決定使用時必須謹慎。在一些瀏覽器中(IE10和Firefox18及其以下版本)會使用單冒號的形式;
<input type="email" placeholder="[email protected]">
input::-moz-placeholder {
color:#666;
}
input::-webkit-input-placeholder {
color:#666;
}
/* IE 10 only */
input:-ms-input-placeholder {
color:#666;
}
/* Firefox 18 and below */
input:-moz-input-placeholder {
color:#666;
}
- E::backdorp是在任何處於全屏模式的元素下的即刻渲染的盒子(並且在所有其他在堆中的層級更低的元素之上),用於改變全屏模式下的背景顏色,全屏模式的默認顏色爲黑色。該僞元素只支持雙冒號的形式,該僞類用得少,兼容性差,甚至許多瀏覽器並未使用該功能)
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>
h1:fullscreen::backdrop {
background: orange;
}
- CSS3規範中的要求使用雙冒號(::)表示僞元素,以此來區分僞元素和僞類,比如::before和::after等僞元素使用雙冒號(:😃,:hover和:active等僞類使用單冒號(😃。除了一些低於IE8版本的瀏覽器外,大部分瀏覽器都支持僞元素的雙冒號(::)表示方法。然而,除了少部分僞元素,如::backdrop必須使用雙冒號,大部分僞元素都支持單冒號和雙冒號的寫法,比如::after,寫成:after也可以正確運行;但是爲了向後兼容,目前在考慮兼容性的情況下可以使用單冒號的寫法,但是也建議全都使用雙冒號;
- 使用::before和::after爲了節省標籤,其中content不可或缺但是可以是空字符;可以用於清除浮動,替換標籤。
- 某些僞類或僞元素仍然處於試驗階段,在使用前建議先在Can I Use等網站查一查其瀏覽器兼容性。
僞類:
CSS 僞類是添加到選擇器的關鍵字,指定要選擇的元素的特殊狀態。例如,:hover可被用於在用戶將鼠標懸停在按鈕上時改變按鈕的顏色。
狀態:
:link用於選擇未訪問的鏈接;
:visited用於選擇已訪問的鏈接;
:hover用於選擇鼠標指針浮動在其上的元素;
:active用於選擇活動的鏈接;
:focus用於選擇獲取焦點的輸入字段。
結構化:
- :not是一個否定僞類,用於匹配不符合參數選擇器的元素。
<ul>
<li class="first-item">一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
li:not(.first-item) {
color: orange;
}
上述列表除了第一個<li>
元素外,其他<li>
元素的文本都會變爲橙色。
- :first-child用於匹配元素的第一個子元素。
- : last-child用於匹配元素的最後一個子元素。
- :first-of-type用於匹配屬於其父元素的首個特定類型的子元素的每個元素。
- :last-of-type用於匹配元素的最後一個子元素。
- :nth-child根據元素的位置匹配一個或者多個元素,它接受一個an+b形式的參數,an+b匹配到的元素示例如下:
1n+0,或n,匹配每一個子元素。
2n+0,或2n,匹配位置爲2、4、6、8…的子元素,該表達式與關鍵字even等價。
2n+1匹配位置爲1、3、5、7…的子元素、該表達式與關鍵字odd等價。
3n+4匹配位置爲4、7、10、13…的子元素。
如下例,有以下HTML列表:
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
<li>Delta</li>
<li>Epsilon</li>
<li>Zeta</li>
<li>Eta</li>
<li>Theta</li>
<li>Iota</li>
<li>Kappa</li>
</ol>
CSS:
選擇第二個元素,”Beta”會變成橙色:
ol :nth-child(2) {
color: orange;
}
選擇位置序號是2的倍數的元素,”Beta”, “Delta”, “Zeta”, “kappa”會變成橙色:
ol :nth-child(2n) {
color: orange;
}
選擇從第6個開始,位置序號是2的倍數的元素,”Zeta”, “Theta”, “Kappa”會變成橙色:
ol :nth-child(2n+6) {
color: orange;
}
- :nth-last-child與:nth-child相似,不同之處在於它是從最後一個子元素開始計數的。
- :nth-of-type與nth-child相似,不同之處在於它是隻匹配特定類型的元素。
如下例,第二個<p>
元素會變爲橙色。
HTML:
<article>
<h1>我是標題</h1>
<p>一些文本</p>
<a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
<p>這裏的文本是橙色的</p>
</article>
p:nth-of-type(2) {
color: orange;
}
- :nth-last-of-type與nth-of-type相似,不同之處在於它是從最後一個子元素開始計數的。
- 當元素是其父元素中唯一一個子元素時,:only-child匹配該元素。
<ul>
<li>這裏的文本是橙色的</li>
</ul>
<ul>
<li>一些文本</li>
<li>一些文本</li>
</ul>
ul :only-child {
color: orange;
}
- :only-of-type用於當元素是其父元素中唯一一個特定類型的子元素時,:only-child匹配該元素。
如下例,第一個ul元素只有一個li類型的元素,該li元素的文本會變爲橙色。
<ul>
<li>這裏的文本是橙色的</li>
<p>這裏不是橙色</p>
</ul>
<ul>
<li>一些文本</li>
<li>一些文本</li>
</ul>
li:only-of-type {
color: orange;
}
- :target是當該頁面的URL帶有錨名稱,指向文檔內某個具體的元素時,:target匹配該元素。
如下例,url中的target命中id值爲target的article元素,article元素的背景會變爲黃色。
URL:
http://example.com/#target
<article id="target">
<h1><code>:target</code> pseudo-class</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</article>
:target {
background: yellow;
}
表單相關:
- :checked匹配被選中的input元素,這個input元素包括radio和checkbox。
如下例,當複選框被選中時,與其相鄰的<label>
元素的背景會變成黃色。
<input type="checkbox"/>
<label>我同意</label>
input:checked + label {
background: yellow;
}
- :default匹配默認選中的元素,例如:提交按鈕總是表單的默認按鈕。
如下例,只有提交按鈕的背景變成了黃色。
<form action="#">
<button>重置</button>
<button type="submit">提交</button>
</form>
:default {
background: yellow;
}
- :disabled匹配禁用的表單元素。
如下例,被禁用input輸入框的透明度會變成50%。
<input type="text" disabled/>
:disabled {
opacity: .5;
}
- :empty匹配沒有子元素的元素。如果元素中含有文本節點、HTML元素或者一個空格,則:empty不能匹配這個元素。
如下例,:empty能匹配的元素會變爲黃色。
第一個元素中有文本節點,所以其背景不會變成黃色;
第二個元素中有一個空格,有空格則該元素不爲空,所以其背景不會變成黃色;
第三個元素中沒有任何內容,所以其背景會變成黃色;
第四個元素中只有一個註釋,此時該元素是空的,所以其背景會變成黃色;
<div>這個容器裏的背景是橙色的</div>
<div> </div>
<div></div>
<div><!-- This comment is not considered content --></div>
div {
background: orange;
height: 30px;
width: 200px;
}
div:empty {
background: yellow;
}
- :enabled用於匹配沒有設置disabled屬性的表單元素。
- :in-range匹配在指定區域內元素。
如下例,當數字選擇器的數字在5到10是,數字選擇器的邊框會設爲綠色。
<input type="number" min="5" max="10">
input[type=number] {
border: 5px solid orange;
}
input[type=number]:in-range {
border: 5px solid green;
}
- :out-of-range與:in-range相反,它匹配不在指定區域內的元素。
- indeterminate的英文意思是“不確定的”。當某組中的單選框或複選框還沒有選取狀態時,:indeterminate匹配該組中所有的單選框或複選框。
如下例,當下面的一組單選框沒有一個處於被選中時,與input相鄰的label元素的背景會被設爲橙色。
<ul>
<li>
<input type="radio" name="list" id="option1">
<label for="option1">Option 1</label>
</li>
<li>
<input type="radio" name="list" id="option2">
<label for="option2">Option 2</label>
</li>
<li>
<input type="radio" name="list" id="option3">
<label for="option3">Option 3</label>
</li>
</ul>
:indeterminate + label {
background: orange;
}
- :valid匹配條件驗證正確的表單元素。
如下例,當email輸入框內的值符合email格式時,輸入框的邊框會被設爲綠色。
<input type="email"/>
input[type=email]:valid {
border: 1px solid green;
}
- :invalid與:valid相反,匹配條件驗證錯誤的表單元素。
- :optional用於匹配是具有optional屬性的表單元素。當表單元素沒有設置爲required時,即爲optional屬性。
如下例,第一個input的背景不會被設爲黃色,第二個input的背景會被設爲黃色。
<input type="text" required />
<input type="text" />
:optional {
background: yellow;
}
-
:required與:optional相反匹配設置了required屬性的表單元素。
-
:read-only匹配設置了只讀屬性的元素,表單元素可以通過設置“readonly”屬性來定義元素只讀。
如下例,input元素的背景會被設爲黃色。
<input type="text" value="I am read only" readonly>
put:read-only {
background-color: yellow;
}
- :read-write匹配處於編輯狀態的元素。input,textarea和設置了contenteditable的HTML元素獲取焦點時即處於編輯狀態。
如下例,input輸入框和副文本框獲取焦點時,背景變成黃色。
<input type="text" value="獲取焦點時背景變黃"/>
<div class="editable" contenteditable>
<h1>點擊這裏可以編輯</h1>
<p>獲取焦點時背景變黃</p>
</div>
:read-write:focus {
background: yellow;
}
:scope(處於試驗階段)匹配處於style作用域下的元素。當style沒有設置scope屬性時,style內的樣式會對整個html起作用。
如下例,第二個section中的元素的文本會變爲斜體。
<article>
<section>
<h1>很正常的一些文本</h1>
<p>很正常的一些文本</p>
</section>
<section>
<style scoped>
:scope {
font-style: italic;
}
</style>
<h1>這裏的文本是斜體的</h1>
<p>這裏的文本是斜體的</p>
</section>
</article>
注:目前支持這個僞類的瀏覽器只有火狐。
語言相關
- :dir(處於實驗階段)匹配指定閱讀方向的元素,當HTML元素中設置了dir屬性時該僞類才能生效。現時支持的閱讀方向有兩種:ltr(從左往右)和rtl(從右往左)。目前,只有火狐瀏覽器支持:dir僞類,並在火狐瀏覽器中使用時需要添加前綴( -moz-dir() )。
如下例,p元素中的阿拉伯語(阿拉伯語是從右往左閱讀的)文本會變成橙色。
<article dir="rtl">
<p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p>
</article>
/* prefixed */
article :-moz-dir(rtl) {
color: orange;
}
/* unprefixed */
article :dir(rtl) {
color: orange;
}
如下例,p元素中的英語文本會變成藍色
<article dir="ltr">
<p>اIf you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p>
</article>
article :-moz-dir(ltr) {
color: blue;
}
/* unprefixed */
article :dir(ltr) {
color: blue;
}
:lang匹配設置了特定語言的元素,設置特定語言可以通過爲了HTML元素設置lang=””屬性,設置meta元素的charset=””屬性,或者是在http頭部上設置語言屬性。實際上,lang=””屬性不只可以在html標籤上設置,也可以在其他的元素上設置。
如下例,分別給不同的語言設置不同的引用樣式:
<article lang="en">
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="fr">
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="de">
<q>Lorem ipsum dolor sit amet.</q>
</article>
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }
其他
:root匹配文檔的根元素。一般的html文件的根元素是html元素,而SVG或XML文件的根元素則可能是其他元素。
如下例,將html元素的背景設置爲橙色
:root {
background: orange;
}
- :fullscreen匹配處於全屏模式下的元素。全屏模式不是通過按F11來打開的全屏模式,而是通過Javascript的Fullscreen API來打開的,不同的瀏覽器有不同的Fullscreen API。目前,:fullscreen需要添加前綴才能使用。
如下例,當處於全屏模式時,h1元素的背景會變成橙色
<h1 id="element">在全屏模式下,這裏的文本的背景會變成橙色.</h1>
<button>進入全屏模式!</button>
JAVASCRIPT:
var docelem = document.getElementById('element');
var button = document.querySelector('button');
button.onclick = function() {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}else if (docelem.webkitRequestFullscreen) {
docelem.webkitRequestFullscreen();
} else if(docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
} else if(docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
CSS:
h1:fullscreen {
background: orange;
}
h1:-webkit-full-screen {
background: orange;
}
h1:-moz-full-screen {
background: orange;
}
h1:-ms-fullscreen {
background: orange;
}