亮术网
程序开发 > 网站前端设计 > CSS2 > 正文

给ul的其中一个li定义的CSS不起作用（双重CSS）

亮术网 2017-04-22 本网原创

　　给列表元素（如 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;}

　　效果图：

  • li的CSS不起作用
  • 当前li应该为红色，但CSS样式没有起作用
  • 给ul的其中一个li定义的CSS不起作用

 

　　以上 CSS 样式给ul的所有li的文字定义了蓝色，给当前li（中间一行）的文字定义了红色，但文字仍然为蓝色，说明 .current 样式没有起作用。

 

　　二、让ul的其中一个li（当前li）起作用的方法

　　只需把样式 .current 定义为当前 li 的样式就会起作用，.current 修改为：

　　.test li.current{color:Red;}

　　效果图：

  • li的CSS不起作用
  • 当前li应该为红色，但CSS样式没有起作用
  • 给ul的其中一个li定义的CSS不起作用
本文浓缩标签：liCSS不起作用