CSS属性选择器

属性选择器根据元素的属性或属性值来匹配元素。

基本语法

CSS

[属性] { }
[属性=值] { }
[属性~=值] { }
[属性|=值] { }
[属性^=值] { }
[属性$=值] { }
[属性*=值] { }

存在属性匹配

CSS

/* 匹配有 disabled 属性的元素 */
[disabled] {
  opacity: 0.5;
}

/* 匹配有 type 属性的元素 */
[type] {
  border: 1px solid #ccc;
}

精确值匹配

CSS

/* type 属性值精确为 text */
[type="text"] {
  padding: 8px;
}

/* type 属性值精确为 checkbox */
[type="checkbox"] {
  width: 20px;
  height: 20px;
}

匹配模式汇总

语法	说明	示例
`[attr]`	存在属性	`[disabled]`
`[attr=val]`	精确匹配	`[type="text"]`
`[attr~=val]`	包含单词	`[class~="active"]`
`[attr	=val]`	开头或开头-
`[attr^=val]`	开头匹配	`[href^="https"]`
`[attr$=val]`	结尾匹配	`[href$=".pdf"]`
`[attr*=val]`	包含匹配	`[href*="example"]`

实用示例

CSS

/* 匹配所有外部链接 */
a[href^="http"] {
  color: blue;
}

/* 匹配所有 PDF 链接 */
a[href$=".pdf"] {
  background: url('pdf-icon.png');
}

/* 匹配邮箱链接 */
a[href^="mailto"] {
  color: green;
}

/* 匹配特定类名 */
[class~="btn"] {
  cursor: pointer;
}

/* 匹配自定义属性 */
[data-role="modal"] {
  position: fixed;
}

[data-index] {
  background: #eee;
}

组合使用

CSS

/* 标签与属性组合 */
input[type="text"] {
  border: 1px solid #ccc;
}

/* 多属性组合 */
input[type="checkbox"][checked] {
  border-color: blue;
}

注意：属性选择器权重为10，与类选择器相同。

要点总结

[attr] 匹配有该属性的元素
[attr=val] 精确匹配属性值
^= $= *= 分别匹配开头、结尾、包含
权重为10，适合精确筛选元素

存放路径：articles/CSS/入门/CSS选择器/CSS属性选择器.md

📝 发现内容有误？点击此处直接编辑