前端开发：CSS属性选择器

前言

做前端开发的都知道，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