css属性选择器，[]，=， ~=， ^=， ~=， $=， |=等符号含义

全栈工程师开发手册 （作者：栾鹏）

css系列教程1—选择器全解

css属性选择器

包括[]是否有某属性，=属性是否等于，~=属性包含，^=属性值以指定字符串开头，$=属性值以指定字符串结尾，*=属性值等于指定字符串，|=属性值以指定字符串为前缀。
代码如下：

p[attribute1][attribute2]{         /*  [] 属性选择器，表示具有某种属性的所有元素，多个参数表示同时具有多个属性，class也可以作为一个属性筛选 */
}
a[href="http://www.123.com"]{      /*  =具有某个属性，且属性值等于指定值的所有元素 */
}
div[class~="class1"]{               /*  ~=具有某个属性，且属性值包含指定值的所有元素  */
}
input[title^="title1"]{             /*  ^=指定属性的值以指定字符串开头   */
}
input[title$="title1"]{             /*  $=指定属性的值以指定字符串结尾   */
}
input[title*="title1"]{             /*  *=指定属性的值包含指定字符串   */
}
input[title|="title1"]{             /*  |=指定属性的值等于title1或者以title1-开头   */
}