CSS属性选择器

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);}

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

解析：