CSS總結(補充)

2021-10-03 04:35:07 字數 4715 閱讀 5508

css選擇器及定義版本

選擇器例子

例子描述

css定義版本

.class.intro選擇class="intro"的所有元素。

1#id#firstname選擇id="firstname"的所有元素。

1**選擇所有元素。

2elementp選擇所有元素。

1element,elementdiv,p選擇所有元素和所有元素。

1element elementdiv p選擇元素內部的所有元素。

1element>elementdiv>p選擇父元素為元素的所有元素。

2element+elementdiv+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:linka:link選擇所有未被訪問的鏈結。

1:visiteda:visited選擇所有已被訪問的鏈結。

1:activea:active選擇活動鏈結。

1:hovera:hover選擇滑鼠指標位於其上的鏈結。

1:focusinput:focus選擇獲得焦點的input元素。

2:first-letterp:first-letter選擇每個元素的首字母。

1:first-linep:first-line選擇每個元素的首行。

1:first-childp:first-child選擇屬於父元素的第乙個子元素的每個元素。

2:beforep:before在每個元素的內容之前插入內容。

2:afterp:after在每個元素的內容之後插入內容。

2:lang(language)p:lang(it)選擇帶有以 「it」 開頭的lang屬性值的每個元素。

2element1~element2p~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-typep:first-of-type選擇屬於其父元素的首個元素的每個元素。

3:last-of-typep:last-of-type選擇屬於其父元素的最後元素的每個元素。

3:only-of-typep:only-of-type選擇屬於其父元素唯一的元素的每個元素。

3:only-childp: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-childp:last-child選擇屬於其父元素最後乙個子元素每個元素。

3:root:root選擇文件的根元素。

3:emptyp:empty選擇沒有子元素的每個元素(包括文字節點)。

3:target#news:target選擇當前活動的#news元素。

3:enabledinput:enabled選擇每個啟用的元素。

3:disabledinput:disabled選擇每個禁用的元素

3:checkedinput:checked選擇每個被選中的元素。

3:not(selector):not(p)選擇非元素的每個元素。

3::selection::selection選擇被使用者選取的元素部分。

3css單位

尺寸單位

描述%百分比

in英吋

cm厘公尺

mm公釐

em1em等於當前的字型尺寸。

2em等於當前字型尺寸的兩倍。

例如,如果某元素以 12pt 顯示,那麼 2em 是24pt。

在 css 中em是非常有用的單位,因為它可以自動適應使用者所使用的字型。

ex乙個ex是乙個字型的x-height

(x-height通常是字型尺寸的一半。)

pt磅 (1pt等於1/72英吋)

pc12 點活字 (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...