本篇介紹CSS selectors的Attribute selectors(屬性選擇器)的用法。
HTML元素有各種屬性(Attributes),有些是任何元素都可有的屬性,稱為Global attributes,例如id
、class
、style
、lang
等;而有些屬性在特定HTML元素才有,例如<label>
的for
屬性,<input>
的placeholder
屬性。
下面範例中各HTML元素分別定義了不同的屬性:
<div>
定義了class
屬性<label>
定義了for
屬性<input>
定義了id
、type
及placeholder
屬性。
<div class="field">
<label for="username">Username</label>
</div>
<div class="field">
<input id="username" type="text" placeholder="輸入姓名">
</div>
CSS的Attribute selectors就是針對HTML元素的屬性(attribute)特性來選取,包括以下多種選取方法。
[att]
以元素的屬性名稱選取該元素。
例如下面的Attribute selectors分別為div[id]
及div[class]
,只要元素中有符合的屬性名稱就會被選取。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: solid 1px;
}
div[id] {
background-color: yellow;
}
div[class] {
background-color: orange;
}
</style>
</head>
<body>
<div id="d1">DIV d1</div>
<div id="d2">DIV d2</div>
<div>DIV d3</div>
<div class="c1">DIV c1</div>
<div class="c2">DIV c2</div>
<div>DIV c3</div>
</body>
</html>
[att=val]
以元素的屬性名稱及相同值選取該元素。
例如下面的Attribute selectors分別為div[id="d1"]
及div[class="c1"]
,只要元素中有符合的屬性名稱及值相同就會被選取。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: solid 1px;
}
div[id="d1"] {
background-color: yellow;
}
div[class="c1"] {
background-color: orange;
}
</style>
</head>
<body>
<div id="d1">DIV d1</div>
<div id="d2">DIV d2</div>
<div>DIV d3</div>
<div class="c1">DIV c1</div>
<div class="c2">DIV c2</div>
<div>DIV c3</div>
</body>
</html>
[att~=val]
以元素的屬性名稱及空白分隔的多個值其中之一相同來選取該元素。
例如下面的Attribute selectors為div[class~="c2"]
,只要元素中有符合的屬性名稱及有一個值或多個以空白分開的值,其中之一符合則會被選取。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: solid 1px;
}
div[class~="c2"] {
background-color: orange;
}
</style>
</head>
<body>
<div id="d1">DIV d1</div>
<div id="d2">DIV d2</div>
<div>DIV d3</div>
<div class="c1 c2 c3">DIV c1</div>
<div class="c2">DIV c2</div>
<div>DIV c3</div>
</body>
</html>
[att|=val]
以元素的屬性名稱及相同值或開頭相同且後面接以-
的值來選取該元素。
例如下面的Attribute selectors分別為div[id|="d1"]
,div[class|="c2"]
及div[class|="c3"]
,只要元素中有符合的屬性名稱及值相同或值開頭相同且後面接以-
則會被選取。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: solid 1px;
}
div[id|="d1"] {
background-color: yellow;
}
div[class|="c2"] {
background-color: orange;
}
div[class|="c3"] {
background-color: pink;
}
</style>
</head>
<body>
<div id="d1-d2">DIV d1</div>
<div id="d2-d1">DIV d2</div>
<div>DIV d3</div>
<div class="c1-c2 c2-c1">DIV c1</div>
<div class="c2-c1">DIV c2</div>
<div class="c3">DIV c3</div>
</body>
</html>
[att^=val]
以元素的屬性名稱及開頭相同的值來選取該元素。
例如下面的Attribute selectors分別為div[id^="d1"]
及div[class^="c2"]
,只要元素中有符合的屬性名稱且值開頭相同則會被選取。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: solid 1px;
}
div[id^="d1"] {
background-color: yellow;
}
div[class^="c2"] {
background-color: orange;
}
</style>
</head>
<body>
<div id="d11">DIV d1</div>
<div id="d12">DIV d2</div>
<div>DIV d3</div>
<div class="c1">DIV c1</div>
<div class="c22">DIV c2</div>
<div class="c32 c2">DIV c3</div>
</body>
</html>
[att$=val]
以元素的屬性名稱及結尾相同的值來選取該元素。
例如下面的Attribute selectors分別為div[id$="d1"]
及div[class$="c2"]
,只要元素中有符合的屬性名稱且值結尾相同則會被選取。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: solid 1px;
}
div[id$="d1"] {
background-color: yellow;
}
div[class$="c2"] {
background-color: orange;
}
</style>
</head>
<body>
<div id="d1">DIV d1</div>
<div id="d2 d1d2">DIV d2</div>
<div id="d3d1">DIV d3</div>
<div class="c1c2c1">DIV c1</div>
<div class="c2">DIV c2</div>
<div class="c3 c1c2">DIV c3</div>
</body>
</html>
[att*=val]
以元素的屬性名稱及值中有相同的字串來選取該元素。
例如下面的Attribute selectors分別為div[id*="d1"]
及div[class*="c2"]
,只要元素中有符合的屬性名稱且值的字串中有相同的會被選取。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: solid 1px;
}
div[id*="d1"] {
background-color: yellow;
}
div[class*="c2"] {
background-color: orange;
}
</style>
</head>
<body>
<div id="d1d2d3">DIV d1</div>
<div id="d2d1d3">DIV d2</div>
<div id="d3d2d1">DIV d3</div>
<div class="c1c2c3">DIV c1</div>
<div class="c2c3c1">DIV c2</div>
<div class="c3c1c2">DIV c3</div>
</body>
</html>
總之Attribute selectors的種類及變化很多,要仔細觀察及多加練習才不會搞錯。
參考:
沒有留言:
張貼留言