关于pure css的样式变更

按照css的定位，不应该有单独和用户的能力。

但是因为有些伪选择器的存在，即使不借助于JS，也能一定范围内和用户产生交互。

 

:active 当用户点击link，button时这个选择器将有效。通常button的按下特效由这个选择器来实现

 

:checked 当用户选择了某个input组件，比如checkbox，select里的option时这个选择器将有效。网上的switcher几乎都是用这个选择器实现的。

 

:focus 当用户把焦点放到某个input组件时，这个选择器将有效。很多输入框输入时的特效用这个选择器。

 

:hover 当用户把鼠标悬停在某个组件上时，这个选择器将有效。几乎所有的pure css dropdown menu都是用这个选择器实现的。

 

:invalid :valid 这两个是一对，当input的输入是无效或有效时，这两个选择器分别有效。有些模拟Google Material Design输入框的特效用了这个选择器，但是由于这个选择器代表的是有效，所以不能用在type=email

一类的input输入框里，否则即使输入了，只要是无效输入，valid选择器也不会有效。另外对于textarea组件无效。

 

:target 当用户点击了页内锚点，这个锚点会使用这个选择器。由于会在页面跳转，不大好控制。

 

css里还有一些其他的伪选择器，但是因为都是静态的，也就是说无法跟用户产生交互，所以没有办法通过交互产生样式变换。