詳解CSS 屬性選擇器

對具有指定屬性的 HTML 元素設定樣式。可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。本文主要為大家介紹了css屬性選擇器的相關知識，有興趣的朋友一起看看吧，希望能幫助大家。

註解：只有在規定了 !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 屬性選擇器- 根據html元素的name屬性值選擇改變元素

讀寫HTML元素的css 屬性

#jQuery 設定 CSS 屬性範例介紹_jquery

以上是詳解CSS 屬性選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！