前言
做前端开发的都知道,CSS的选择器常用的大概分为四类:元素选择器、id选择器、类选择器、属性选择器。而且CSS的选择器也是根据优先级顺序来执行的,实际开发中会根据业务场景的需要结合选择器的顺序,来选择使用选择器。本章博文就来分享一下常用的CSS的选择器中的属性选择器,也叫做通配选择器,总结一下,方便查阅使用。
属性选择器的定义
属性选择器是在CSS 2的时候才产生的,属性选择器可以通过元素的属性以及属性值来选择元素的操作。一般情况下把HTML元素属性放在中括号中,就称之为属性选择器,如:[attribute] 。
属性选择器的作用
属性选择器主要的作用就是为带有特定属性的HTML元素设置样式,也就是说我们可以设置带有特定属性或者属性值的HTML元素的样式。
属性选择器的语法
- [attribute] 表示HTML元素带有以 attribute 命名的属性的元素。
- [attribute=val] 表示HTML元素带有以 attribute 命名的属性,并且属性值为 val 的元素。
- [attribute~=val] 表示HTML元素带有以 attribute 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 val。
- [attribute|=val] 表示HTML元素带有以 attribute 命名的属性的元素,属性值为“val”或是以“val-”为前缀("-"为连接符,Unicode 编码为 U+002D)开头,常用场景是用来匹配语言简写代码(如 zh-CN,可以用 zh 作为 v