CSS那些事兒 選擇符

2022-03-09 11:07:54 字數 1351 閱讀 9779

今天學習css基礎部分,主要關於選擇符。寫**的過程中,發現了乙個問題:在寫style部分的 css屬性選擇符格式是標籤元素後緊跟一對中括號,是緊跟!如果出現空格,就不能定位到該標籤。

*在寫css過程中,尤其是class的命名一定要大小寫一致,不能html與css裡不一樣(區分大小寫)。錯誤示例:今天出現了乙個情況就是自己在html中命名class為 v ,在css裡卻是 v 。

*屬性選擇符,e[attr]      eg:  img[src]

例如:  p[title~="css"]   在下面起作用的有 1、3。(翻譯:在p標籤中,選擇title值中包含空格與「css」的部分)

title屬性值為xhtml css的段落標籤p

title屬性值為css xhtml的段落標籤p

title屬性值為「cascding style sheets(疊層樣式表)的簡稱為css」的段落標籤p

e[attr|="value"] 是指e標籤中,選擇attr中以「value-」開頭的。

*id選擇符是以(#)為字首,類是以(.)為字首進行選擇。

*選擇符的權重值優先級別:

1. 標有!important關鍵字宣告的屬性。

2.html中的css樣式屬性。

3.作者編輯的css檔案樣式屬性。

4.使用者設定的樣式。

5.瀏覽器預設的樣式。

css引入到html頁面方式:

引入方式一般分為3種,任何一種都有其獨特有大作用,分別為:

1)行間樣式,直接寫在標籤元素的屬性style中。

2)內嵌樣式表,將樣式表寫在標籤之內。

3)外鏈樣式表,通過方式外鏈css樣式檔案。

4)匯入樣式表,通過@import 關鍵字匯入外部css樣式檔案。

例如:其中rel屬性定義該標籤關聯的樣式表標籤;media屬性是設定屬性呼叫的樣式檔案主要是針對什麼裝置而使用的。media=「screen」是針對顯示器的樣式。

/*以下內容是mycss.css檔案中的內容*/

@import url("base.css"); /*通過外部css檔案再次匯入另外乙個css檔案base.css*/

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...

CSS 選擇符大全(常用css選擇符)

e 某個元素,如p id 使用id,如 idname class 使用class,如.myclass 萬用字元 包含選擇符 e f e所有的f包含子代,孫代,子子孫孫等等 子選擇符 e相鄰選擇符 e f 和e相鄰的f,相隔乙個都不算 兄弟選擇符 e f 和e同級的f的算 e att e中帶有某個at...