Attribute Selector ng CSS

为带有特定属性的 HTML 元素设置样式

我们可以设置带有特定属性或属性值的 HTML 元素的样式。

CSS [attribute] Selector

[attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 <a> 元素；

Halimbawa

a[target] {
  background-color: yellow;
}

Subukan ka nang personal na.

CSS [attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 <a> 元素：

Halimbawa

a[target="_blank"] { 
  background-color: yellow;
}

Subukan ka nang personal na.

CSS [attribute~="value"] 选择器

[attribute~="value"] 选择器选取属性值包含指定词的元素。

下例选取 title 属性包含 "flower" 单词的所有元素：

Halimbawa

[title~="flower"] {
  border: 5px solid yellow;
}

Subukan ka nang personal na.

上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

CSS [attribute|="value"] 选择器

[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。

Sa mga sumusunod na halimbawa, pinili ng selector ang lahat ng elemento na may class na nagsimula sa "top":

注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

Halimbawa

[class|="top"] {
  background: yellow;
}

Subukan ka nang personal na.

CSS [attribute^="value"] selector

[attribute^="value"] selector ay ginagamit upang piliin ang elemento na may attribute na nagsimula sa tinukoy na halaga.

Sa mga sumusunod na halimbawa, pinili ng selector ang lahat ng elemento na may class na nagsimula sa "top":

Mga Payo:Hindi kailangan na ang halaga ay buong salita!

Halimbawa

[class^="top"] {
  background: yellow;
}

Subukan ka nang personal na.

CSS [attribute$="value"] selector

[attribute$="value"] selector ay ginagamit upang piliin ang elemento na may attribute na nagtatapos sa tinukoy na halaga.

Sa mga sumusunod na halimbawa, pinili ng selector ang lahat ng elemento na may class na nagtatapos sa "test":

Mga Payo:Hindi kailangan na ang halaga ay buong salita!

Halimbawa

[class$="test"] {
  background: yellow;
}

Subukan ka nang personal na.

CSS [attribute*="value"] selector

[attribute*="value"] selector ay pinili ang elemento na may halaga ng attribute na naglalaman ng tinukoy na salita.

Sa mga sumusunod na halimbawa, pinili ng selector ang lahat ng elemento na may class na naglalaman ng "te":

Mga Payo:Hindi kailangan na ang halaga ay buong salita!

Halimbawa

[class*="te"] {
  background: yellow;
}

Subukan ka nang personal na.

Itayo ang estilo ng form

Kung gusto mong itayo ang estilo ng form na walang class o id, ang property selector ay magiging kapaki-pakinabang:

Halimbawa

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Subukan ka nang personal na.

Mga Payo:Bisita ang aming CSS Form Tutorial，Makakatutok ka ng mas maraming kaalaman sa pagtayo ng estilo ng form gamit ang CSS.

Lahat ng CSS property selector

Selector Halimbawa Paglalarawan ng halimbawa
[attribute] [target] Piliin ang lahat ng elemento na may target attribute.
[attribute=value] [target=_blank] Piliin ang lahat ng elemento na may target="_blank".
[attribute~=value] [title~=flower] Piliin ang lahat ng elemento na may title na naglalaman ng salitang "flower".
[attribute|=value] [lang|=en] Piliin ang lahat ng elemento na may lang na nagsimula sa "en".
[attribute^=value] a[href^="https"] Piliin ang bawat <a> elemento na ang halaga ng kanyang href ay nagsimula sa "https".
[attribute$=value] a[href$=".pdf"] Piliin ang bawat <a> elemento na ang halaga ng kanyang href ay natapos sa ".pdf".
[attribute*=value] a[href*="codew3c"] Select each <a> element whose href attribute value contains the substring "codew3c".

Further Reading

Supplementary Reading:CSS Attribute Selector Detailed