一天坑之--css伪类，hover消除

精通css里是这么解释伪类的作用的：根据文档结构以外的一些条件，对元素进行样式的应用。大致意思就是我不需要像常用的选择器例如ul li{ background:red }这样去根据文档结构来应用样式。伪类有这么几种条件：link visited(这些都只能应用于锚元素，也就是指定超链接的元素，所以它们也叫链接伪类)，hover，active ，onfous（统称动态伪类）。

link和visited：这个就很常见了，大家在打开一些网站都知道超链接是蓝色的，其实你也可以设置成你想要的颜色

比如：<style type="text/css">
a:visited {color: #00FF00}//绿色

   </style>

<a href="/index.html" target="_blank">我就是绿色的超链接你服不服？</a>

hover:啥意思呢？就是鼠标进入元素范围的时候触发样式应用。

<style type="text/css">
a:visited {color: red}

   </style>

<a href="/index.html" target="_blank">鼠标移进来我就是红色的超链接你服不服？</a>

active:点击元素触发样式应用。

<style type="text/css">
a:visited {color: blue}

   </style>

<a href="/index.html" target="_blank">鼠标点击我就是蓝色的超链接你服不服？</a>

onfoucs:元素获得焦点的时候。

<style type="text/css">

input:focus

{

background-color:yellow;

}

</style>

 <input type="text" name="fname" />我获得焦点的是就是黄色的你服不服？

好，这下大家服了吧。注意：hover和active必须要定义在link和visited之后，而且active必须要在hover之后才会生效。

好了接下来说说今天遇到的问题，以前写了一个组件，在公共css文件中这么定义

.goodsbuttongroup li:hover{ background:#7fba00; color:#fff;}

之后想把它运用在一组点击按钮中，后来产品想让我去除这个hover功能，一开始就各种百度，什么解绑hover啊，都没用。最后发现这个有用。

.goodsbuttongroup li:not(.nohover):hover {  

    background:#7fba00; color:#fff;

}

哎！这么一来，我把不需要hover功能的li标签全加上了nohover类，就解决了问题了。这意思就是该类下li标签但不属于nohover类的标签支持hover的定义。