本篇介紹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的種類及變化很多，要仔細觀察及多加練習才不會搞錯。
參考：
沒有留言:
張貼留言