css一直有个选择器被我忽视了，最近发现这个选择器有点“不容小视”——CSS属性选择器，太强大了，不输于class

首先我们来看看常见的属性选择器怎么用？

1.修改html默认的属性样式：

Html5 通过css属性选择器  修改input 默认的样式 

input[type='date']::-webkit-inner-spin-button 
input[type='date']::-webkit-clear-button

通过css属性选择器，选择type属性值为‘date’的输入框，修改其样式，这是最常见的用法了！

以下为修改data输入框的方法： 

::-webkit-datetime-edit – 控制编辑区域
::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域
::-webkit-datetime-edit-text – 控制年月日之间的斜线或短横线
::-webkit-datetime-edit-month-field – 控制月份
::-webkit-datetime-edit-day-field – 控制具体日子
::-webkit-datetime-edit-year-field – 控制年文字, 如2017四个字母占据的那片地方
::-webkit-inner-spin-button –控制上下小箭头
::-webkit-calendar-picker-indicator – 这是控制下拉小箭头
::-webkit-clear-button –控制清除按钮

2.我们是否还记得，html可以自定义属性，例如：data-*="*"，或者你见到的其他的自定义属性，用css属性选择器也可以修改这些样式。

下面我自定义 foo属性，但是里面的值不一样，咱们看看能不能生效。 

<p  foo="aa">123</p>
<p  foo="aa bb">345</p>
<p  foo="aabc">567</p>
<p  foo="dd">457</p>
<p  foo="ee">321</p>
<p  foo="ff">666</p>
<p  foo="gg">888</p>

然后设置css样式： 

p{background: #000;color: #fff;display: inline-block;}
p[foo]{background-color: lightblue;}
p[foo=aa]{background-color: #333;}
p[foo^=aa]{background-color: #666;}
p[foo~=aa]{background-color: green;}
p[foo*=aa]{background-color: yellow;}
p[foo$=bb]{background-color: rgb(184, 56, 56);}

很明显，可以生效，效果如下：

解析：

css自定义属性选择器
[自定义名]，选择自定义名的全部元素，例如:指定为foo的全部自定义名[foo];
[自定义名=值]，选择自定义名为“值”的元素,例如:值为aa的foo元素[foo=aa];
[自定义名^=值]或[自定义名|=值],选择自定义为“值”开头的元素,例如:值以aa开头的foo元素[foo^=aa];
[自定义名$=值],选择自定义为“值”结束的元素,例如:值以bb结尾的foo元素[foo$=bb];
[自定义名~=值],选择自定义包含“值”元素,例如:[foo~=aa]，只有单个值符合条件才会匹配，字符串不算
[自定义名*=值],选择自定义含有“值”元素的所有元素,例如:[foo*=aa]，只要自定义的值有这个字符数值，就回被匹配到