给列表元素（如 ul li、ol li）定义 CSS 样式，通常的做法是给父元素（如 ul）定义一个 CSS 样式，再用这个样式来定义子元素（如 li）的样式，因为子元素通常比较多，样式又大多相同，一个个定义比较麻烦。这样定义有时会出现一个问题：就拿 ul li 来说，所有 li 元素都用一个通用的 CSS 样式，但有一个 li 元素还要加一个独有的 CSS 样式，例如当前菜单就会出现这种情况；此时，需要给这个 li 定义一个独立的 CSS 样式，定义容易使用难，把独立定义的 CSS 样式用于 li 却不起作用。这个问题想必做过 Web 前端设置的人都遇到过。
之前已经通过 ul 给 li 定义了一个 CSS 样式，现在又单独定义一个，也就是定义双重CSS，再通过各自为正的方法定义会无效自然不起作用，应该怎么定义才起作用？看下面的实例。
给ul的其中一个li定义的CSS不起作用（双重CSS）举例
html代码：
- <ul class="test">
- <li>li的CSS不起作用</li>
- <li class="current">当前li应该为红色，但CSS样式没有起作用</li>
- <li>给ul的其中一个li定义的CSS不起作用</li>
- </ul>
CSS样式：
- .test{width:360px; border:1px solid #232323;list-style:none;}
- .test li{line-height:24px; margin-top:8px; color:Blue;}
- .current{color:Red;}
效果图：
以上 CSS 样式给ul的所有li的文字定义了蓝色，给当前li（中间一行）的文字定义了红色，但文字仍然为蓝色，说明 .current 样式没有起作用。
让ul的其中一个li（当前li）起作用的方法
只需把样式 .current 定义为当前 li 的样式就会起作用，.current 修改为：
- .test li.current{color:Red;}
效果图：
本文来源：【给ul的其中一个li定义的CSS不起作用（双重CSS）】
由思享SEO博客编辑转载，仅用于参考学习，如有侵权请联系本站修改删除！