CSS属性选择器

了解如何使用CSS属性选择器

在本文中,我将介绍属性选择器。

另请参阅基本CSS选择器简介。在这里,我介绍了几个基本的CSS选择器:使用类型选择器,类,id,如何组合它们,如何定位多个类,如何在同一规则中为多个选择器设置样式,如何使用子级和直接型遵循页面层次结构子选择器和相邻的兄弟姐妹。

属性存在选择器

第一种选择器类型是属性存在选择器。

我们可以检查一个元素使用的属性[]句法。p[id]将全选p页面中具有id属性,无论其值如何:

p[id] {
  /* ... */
}

确切的属性值选择器

在方括号内,您可以使用=,并且仅当属性与指定的确切值匹配时,才会应用CSS:

p[id="my-id"] {
  /* ... */
}

匹配属性值部分

尽管=让我们检查确切的值,我们还有其他运算符:

  • *=检查属性是否包含部分
  • ^=检查属性是否以不完整部分开头
  • $=检查属性是否以部分结尾
  • |=检查属性是否以partial开始,并在其后跟一个破折号(例如,在类中很常见),或者仅包含partial
  • ~=检查部分属性是否包含在属性中,但与其余部分之间用空格分隔

我们提到的所有检查都是区分大小写

如果您添加i紧接在右括号之前,该检查将不区分大小写。许多浏览器都支持它,但并非所有浏览器都支持,请检查https://caniuse.com/#feat=css-case-insensitive

免费下载我的CSS手册


更多CSS教程: