您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“CSS中屬性選擇器有哪些”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“CSS中屬性選擇器有哪些”這篇文章吧。
對帶有指定屬性的 HTML 元素設置樣式。
可以為擁有指定屬性的 HTML 元素設置樣式,而不僅限于 class 和 id 屬性。
注釋:只有在規定了 !DOCTYPE 時,IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中,不支持屬性選擇。
屬性選擇器
下面的例子為帶有 title 屬性的所有元素設置樣式:
[title] { color:red; }
屬性和值選擇器
下面的例子為 title="W3School" 的所有元素設置樣式:
[title=W3School] { border:5px solid blue; }
屬性和值選擇器 - 多個值
下面的例子為包含指定值的 title 屬性的所有元素設置樣式。適用于由空格分隔的屬性值:
[title~=hello] { color:red; }
下面的例子為帶有包含指定值的 lang 屬性的所有元素設置樣式。適用于由連字符分隔的屬性值:
[lang|=en] { color:red; }
設置表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用:
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }
CSS 選擇器參考手冊
選擇器 | 描述 |
[attribute] | 用于選取帶有指定屬性的元素。 |
[attribute=value] | 用于選取帶有指定屬性和值的元素。 |
[attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。 |
[attribute|=value] | 用于選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。 |
[attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
[attribute$=value] | 匹配屬性值以指定值結尾的每個元素。 |
[attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
以上是“CSS中屬性選擇器有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。