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

很明显,可以生效,效果如下:

解析:

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