CSS Attribute Selector

تعيين النمط للعناصر HTML التي تحتوي على خاصية محددة

يمكننا تعيين النمط للعناصر HTML التي تحتوي على خاصية محددة أو قيمة خاصية محددة.

CSS [attribute] سىلئكتور

[attribute] اختيارير لاختيار العناصر التي تحتوي على خاصية محددة.

في المثال التالي، يتم اختيار جميع العناصر <a> التي تحتوي على الخاصية target:

实例

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

亲自试一试

مختارير [attribute="value"] CSS

[attribute="value"] اختيارير لاختيار العناصر التي تحتوي على خاصية محددة وقيمة محددة.

في المثال التالي، يتم اختيار جميع العناصر <a> التي تحتوي على الخاصية target="_blank":

实例

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

亲自试一试

مختارير [attribute~="value"] CSS

مختارير [attribute~="value"] اختيارير لاختيار العناصر التي تحتوي على خاصية تحتوي على كلمة معينة.

في المثال التالي، يتم اختيار جميع العناصر التي تحتوي على خاصية title تحتوي على كلمة "flower":

实例

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

亲自试一试

الامثلة السابقة ستطابق العناصر التالية: title="flower"، title="summer flower"، title="flower new"، ولكن لن تطابق: title="my-flower" أو title="flowers".

مختارير [attribute|="value"] CSS

[attribute|="value"] اختيارير لاختيار العناصر التي تحتوي على الخاصية المحددة التي تبدأ بالقيمة المحددة.

以下示例选取以 "top" 开头的所有 class 属性元素：

التعليقات:القيمة يجب أن تكون كلمة كاملة أو كلمة واحدة فقط، مثل class="top" أو يتبعها شرط، مثل class="top-text"。

实例

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

亲自试一试

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

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

以下示例选取以 "top" 开头的所有 class 属性元素：

提示：值不必是完整单词！

实例

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

亲自试一试

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

[attribute$="value"] 选择器用于选取以指定值结尾的指定属性元素。

以下示例选取以 "test" 结尾的所有 class 属性元素：

提示：值不必是完整单词！

实例

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

亲自试一试

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

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

以下示例选取包含 "te" 的所有 class 属性元素：

提示：值不必是完整单词！

实例

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

亲自试一试

设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

实例

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

亲自试一试

提示：请访问我们的 CSS 表单教程，了解更多关于如何使用 CSS 设置表单样式的知识。

所有 CSS 属性选择器

选择器 例子 例子描述
[attribute] [target] 选择带有 target 属性的所有元素。
[attribute=value] [target=_blank] 选择带有 target="_blank" 属性的所有元素。
[attribute~=value] [title~=flower] 选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value] [lang|=en] 选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value] a[href^="https"] 选择以 "https" 开头的每个 <a> 元素的 href 属性值。
[attribute$=value] a[href$=".pdf"] 选择以 ".pdf" 结尾的每个 <a> 元素的 href 属性值。
[attribute*=value] a[href*="codew3c"] 选择其 href 属性值包含子串 "codew3c" 的每个 元素。

延伸阅读

课外书：CSS اىنترى سىلئكتور تىرى