CSS選擇符 屬性選擇符

2021-09-24 17:27:47 字數 2615 閱讀 3924

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的

img[title]

這種選擇符的第一部分是標籤名(img),隨後是屬性名,放在方括號裡:[title] 。

css不限制屬性選擇符只能使用標籤名,也可以使用類。例如:

.photo[title]

用於選取類為photo,而且設定了title屬性的全部元素。

a[href=""]
又例如需要選取表單中的文字框

input[type="text"]
[attribute~=value]選取含有attribute的屬性,且attribute屬性的值是以空格隔開的系列值,其中某個值為value的指定元素。

或者選取含有attribute的屬性,且attribute屬性只有乙個value值的元素。

[attribute~=value]是[attribute=value] 的加強版。

html**

這是第二個p元素

第三個p元素

這是乙個div元素

選取含有attribute的屬性,且attribute屬性的值是以連字元分隔的系列值,其中第乙個值為value的指定元素。

html**

這是第二個p元素

第三個p元素

這是乙個div元素

選取含有attribute的屬性,且attribute屬性的值是以value開頭的指定元素。

html**

這是第二個p元素

第三個p元素

這是乙個div元素

選取含有attribute的屬性,且attribute屬性的值是以value結尾的指定元素。

html**

這是第二個p元素

第三個p元素

這是乙個div元素

選取含有attribute的屬性,且attribute屬性的值含有value的指定元素。

html**

這是第二個p元素

第三個p元素

這是乙個div元素

其中[attribute^=value]、[attribute$=value]和[attribute*=value]是css 3.0新增的選擇符。

上面的選擇符匹配規則越嚴格優先順序越高

例如:img[title="rabbit"] 選擇符定義的css樣式會覆蓋 img[title] 中相同定義的css樣式。

最後是我常用的屬性選擇符的地方。

比如我要把站外的鏈結用不同顏色的字型突出顯示。

要調整pdf檔案padding:

a[href$=".pdf"]

html與css 目錄:html與css

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...

jQuery選擇符 XPath選擇符

說明 jquery支援一組基本的xpath選擇符 可以和css選擇符一起使用 jquery無論對什麼文件都可以使用xpath和 css選擇符。1.屬性選擇符 2 特點 允許以類似正規表示式的語法來標識字串的開始 和結尾 也可以使用 表示字串的任意位置。1 a href mailto 表示取得以mai...