天天一個css 僞類

　　css有下列僞類   :active  :after,  :before :first  :first-child :first-letter :first-line :focus  :hover  :lang :left  :link   :right  :visited  =   ~=   |=

　　:link              連接未被訪問時的樣式  

　　:visited  　　  連接被訪問後的樣式

　　:hover           當鼠標放在一個元素上面時應用

　　:active　　　   當一個元素被用戶激活時應用css,例如在用戶按下鼠標後，釋放鼠標前會激活元素。

　　

　　:lang(C)              若是html元素指定lang屬性（注意是html元素） ,那麼能夠用lang僞類指定相關css屬性。C表示相關語言的代碼標識。具體可參考　　         　　　　                                     http://www.w3school.com.cn/tags/html_ref_language_codes.asp

　　:first-line        給一個塊級容器元素第一行文本應用css, 注意該僞類只能應用於塊級容器元素.例如p

　　:first-letter     給一個塊級容器元素的第一行的文本的第一個字母應用css,而且該行內第一個字母前不能出現出現如圖片之類的元素。

　　　　　　　　　　經過給first-letter應用float:left能夠使得第一個字母能夠佔據左邊多行，具體行數取決於字體大小。效果以下。

　　　　　　　　　　

　　　　　　　　　　注意標點符號出如今第一行的第一個字母時不算作第一個字母，但應用first-letter樣式時會應用該標點符號。效果以下

　　　　　　　　　　

　　:before　　     用於給該元素前面插入內容,屬性爲content

　　:after　　　　  用於給該元素後面插入內容,屬性爲content

　　content屬性：

　　　　值：normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ |inherit

　　

　

.class	.intro	選擇 class="intro" 的全部元素。	1
#id	#firstname	選擇 id="firstname" 的全部元素。	1
*	*	選擇全部元素。	2
element	p	選擇全部 <p> 元素。	1
element,element	div,p	選擇全部 <div> 元素和全部 <p> 元素。	1
element element	div p	選擇 <div> 元素內部的全部 <p> 元素。	1
element>element	div>p	選擇父元素爲 <div> 元素的全部 <p> 元素。	2
element+element	div+p	選擇緊接在 <div> 元素以後的全部 <p> 元素。	2
[attribute]	[target]	選擇帶有 target 屬性全部元素。	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的全部元素。	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的全部元素。	2
[attribute|=value]	[lang|=en]	選擇 lang 屬性值以 "en" 開頭的全部元素。	2
:link	a:link	選擇全部未被訪問的連接。	1
:visited	a:visited	選擇全部已被訪問的連接。	1
:active	a:active	選擇活動連接。	1
:hover	a:hover	選擇鼠標指針位於其上的連接。	1
:focus	input:focus	選擇得到焦點的 input 元素。	2
:first-letter	p:first-letter	選擇每一個 <p> 元素的首字母。	1
:first-line	p:first-line	選擇每一個 <p> 元素的首行。	1
:first-child	p:first-child	選擇屬於父元素的第一個子元素的每一個 <p> 元素。	2
:before	p:before	在每一個 <p> 元素的內容以前插入內容。	2
:after	p:after	在每一個 <p> 元素的內容以後插入內容。	2
:lang(language)	p:lang(it)	選擇帶有以 "it" 開頭的 lang 屬性值的每一個 <p> 元素。	2
element1~element2	p~ul	選擇前面有 <p> 元素的每一個 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每一個 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結尾的全部 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包含 "abc" 子串的每一個 <a> 元素。	3
:first-of-type	p:first-of-type	選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。	3
:last-of-type	p:last-of-type	選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。	3
:only-of-type	p:only-of-type	選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。	3
:only-child	p:only-child	選擇屬於其父元素的惟一子元素的每一個 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每一個 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最後一個子元素開始計數。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個 <p> 元素的每一個 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，可是從最後一個子元素開始計數。	3
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每一個 <p> 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每一個 <p> 元素（包括文本節點）。	3
:target	#news:target	選擇當前活動的 #news 元素。	3
:enabled	input:enabled	選擇每一個啓用的 <input> 元素。	3
:disabled	input:disabled	選擇每一個禁用的 <input> 元素	3
:checked	input:checked	選擇每一個被選中的 <input> 元素。	3
:not(selector)	:not(p)	選擇非 <p> 元素的每一個元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

 

 

a:link { color: red } /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */
html:lang(fr-ca) { quotes: '« ' ' »' }
p:first-line { text-transform: uppercase }
p:first-letter { font-size: 3em; font-weight: normal }

　　　　　

counter:
BODY {
    counter-reset: chapter;      /* Create a chapter counter scope 設置chapter爲0*/
}
H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
}
H1 {
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}