常见表单隔行变色、某属性值变色、悬停变色

1、隔行变色呢，用到的是css3结构化伪类

<ul>
	<li>1</li>
	<li>2</li>
</ul>

li:nth-child(2n+3)
{
	background:#ff0000;
}

(2n+3)：2行变一次色，从第三行开始

2、遇到某属性值变色，实际上用的是属性选择器的一种

<ul>
	<li class="bbb">1</li>
	<li class="aaa">2</li>
	<li class="aaa">3</li>
	<li class="bbb">4</li>
	<li class="aaa">5</li>
</ul>

li[class="aaa"]{
	background:#ff0000;
}

顺带一提，vue实现的话只需要:class="{}"，然后某值就变某色，{}为后端给你判断依据，视情况而定

那为什么不直接写.aaa{背景色}呢，其实就是方便维护而已，而且不会影响到定义的其他属性值，如果这个项目够大接手的人够多，那么直接这样写会导致同名class样式受到影响，不好维护。(有个不好的地方就是如果判断值是个数字，那么你就只能绑定title了)

但其实我也多数直接定义.aaa{}，因为快.....(这是个不好的习惯，划掉)

3、鼠标悬停变色，实际上就是使用伪类(选择变色等同理)

li[class="aaa"]:hover{
	background:#000000;	
}