css選擇器及定義版本
選擇器例子
例子描述
css定義版本
.class
.intro
選擇class="intro"
的所有元素。
1#id
#firstname
選擇id="firstname"
的所有元素。
1*
*
選擇所有元素。
2element
p
選擇所有元素。
1element,element
div,p
選擇所有元素和所有
元素。
1element element
div p
選擇元素內部的所有
元素。
1element>element
div>p
選擇父元素為元素的所有
元素。
2element+element
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
選擇每個元素的首字母。
1:first-line
p:first-line
選擇每個元素的首行。
1:first-child
p:first-child
選擇屬於父元素的第乙個子元素的每個元素。
2:before
p:before
在每個元素的內容之前插入內容。
2:after
p:after
在每個元素的內容之後插入內容。
2:lang(language)
p:lang(it)
選擇帶有以 「it」 開頭的lang
屬性值的每個元素。
2element1~element2
p~ul
選擇前面有元素的每個
元素。
3[attribute^=value]
a[src^="https"]
選擇其src
屬性值以 「https」 開頭的每個元素。
3[attribute$=value]
a[src$=".pdf"]
選擇其src
屬性以 「.pdf」 結尾的所有元素。
3[attribute*=value]
a[src*="abc"]
選擇其src
屬性中包含 「abc」 子串的每個元素。
3:first-of-type
p:first-of-type
選擇屬於其父元素的首個元素的每個
元素。
3:last-of-type
p:last-of-type
選擇屬於其父元素的最後元素的每個
元素。
3:only-of-type
p:only-of-type
選擇屬於其父元素唯一的元素的每個
元素。
3:only-child
p:only-child
選擇屬於其父元素的唯一子元素的每個元素。
3:nth-child(n)
p:nth-child(2)
選擇屬於其父元素的第二個子元素的每個元素。
3:nth-last-child(n)
p:nth-last-child(2)
同上,從最後乙個子元素開始計數。
3:nth-of-type(n)
p:nth-of-type(2)
選擇屬於其父元素第二個元素的每個
元素。
3:nth-last-of-type(n)
p:nth-last-of-type(2)
同上,但是從最後乙個子元素開始計數。
3:last-child
p:last-child
選擇屬於其父元素最後乙個子元素每個元素。
3:root
:root
選擇文件的根元素。
3:empty
p:empty
選擇沒有子元素的每個元素(包括文字節點)。
3:target
#news:target
選擇當前活動的#news
元素。
3:enabled
input:enabled
選擇每個啟用的元素。
3:disabled
input:disabled
選擇每個禁用的元素
3:checked
input:checked
選擇每個被選中的元素。
3:not(selector)
:not(p)
選擇非元素的每個元素。
3::selection
::selection
選擇被使用者選取的元素部分。
3css單位
尺寸單位
描述%
百分比
in
英吋
cm
厘公尺
mm
公釐
em
1em
等於當前的字型尺寸。
2em
等於當前字型尺寸的兩倍。
例如,如果某元素以 12pt 顯示,那麼 2em 是24pt。
在 css 中em
是非常有用的單位,因為它可以自動適應使用者所使用的字型。
ex
乙個ex
是乙個字型的x-height
。
(x-height
通常是字型尺寸的一半。)
pt
磅 (1pt
等於1/72英吋)
pc
12 點活字 (1pc
等於12點)
px
畫素 (計算機螢幕上的乙個點)
顏色單位
描述(顏色名)
顏色名稱(比如red
)
rgb(x,x,x)
rgb值(比如rgb(255,0,0)
)
rgb(x%,x%,x%)
rgb值(比如rgb(100%,0%,0%)
)
#rrggbb
十六進製制數(比如#ff0000
)
CSS自學筆記 一 總結補充
1,type text css href css div.css rel表示 告訴瀏覽器你將採用乙個樣式表檔案 type表示這個樣式表檔案是css href表示具體的哪個css表 先看一張圖 通過依據元素在其位置的上下文關係來定義樣式,你可以使標記更加簡潔。看如下的一段 li strong它的含義是...
css樣式補充
設定為該屬性值的盒子,本質上讓然是乙個塊盒,但同時該盒子會附帶另乙個盒子 元素本身生成的盒子叫做主盒子,附帶的盒子稱為次盒子,次盒子和主盒子水平排列 涉及的css list style type 設定次盒子 list style position 設定次盒子相對於主盒子的位置 速寫屬性list st...
實習總結補充
考慮到安全問題,實習生不宜進車間,所以測試系統的功能測試需要用到roboguide機械人 軟體,所以在初期階段,主要工作內容是學習roboguide 軟體以及環境配置。對於roboguide 軟體學習,主要學習內容如下 通過機械人培訓教材學習機械人基本結構,控制機制及控制程式基礎 進行robogui...