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);}
很明显,可以生效,效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/9acadd0e4cf4cdc339f6b172497e9471.png)
解析:
css自定义属性选择器
[自定义名],选择自定义名的全部元素,例如:指定为foo的全部自定义名[foo];
[自定义名=值],选择自定义名为“值”的元素,例如:值为aa的foo元素[foo=aa];
[自定义名^=值]或[自定义名|=值],选择自定义为“值”开头的元素,例如:值以aa开头的foo元素[foo^=aa];
[自定义名$=值],选择自定义为“值”结束的元素,例如:值以bb结尾的foo元素[foo$=bb];
[自定义名~=值],选择自定义包含“值”元素,例如:[foo~=aa],只有单个值符合条件才会匹配,字符串不算
[自定义名*=值],选择自定义含有“值”元素的所有元素,例如:[foo*=aa],只要自定义的值有这个字符数值,就回被匹配到