*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

CSS 選擇器使用


CSS 選擇器的使用操作



選擇器 例子 例子描述 CSS
. class .intro 選擇class="intro" 的所有元素。 1
# id #firstname 選擇id="firstname" 的所有元素。 1
* * 選擇所有元素。 2
element p 選擇所有<p> 元素。 1
element加上class div.classname 選擇所有有著class="classname"的<div> 元素。 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> 元素。<br>也算一個+br,例div +br +p 。 2
[ attribute ] [class]/ div[class] 選擇帶有class屬性所有(/div)元素。 2
[ attribute ="value"] [class="a01"]/ div[class="a01"] (div)元素有 class 屬性且值等於 "a01" 2
[ attribute ~="value"] [title~="bar"] 元素有 title 屬性,可利用空白字元區隔指定多項屬性值,其中一個包含屬性值 "bar"。 2
[ attribute |="value"] [class|="en"] 選擇class 屬性值必須是"en"以及含有連字號的第一屬性值,連字號前面的字串也是"en"的所有元素。例如,class="en", class="en-egg egg" 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 {
content: "後方產生的內容";
color: blue;
}
在每個<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> 元素。1,2,3,4。odd(奇數)或 even(偶數)。公式(an+b),a 表示周期的大小,n 是計數器(從 0 開始),例3n+1(間隔3個元素套用,1,4,7...),3n+2。公式(-n+3),則只有3,2,1這前三個。 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



請參考資料來源


沒有留言:

張貼留言