li定义的class不起作用是怎么回事

前端 思享 367浏览 0评论

给列表元素(如 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代码:

  1. <ul class="test">
  2. <li>li的CSS不起作用</li>
  3. <li class="current">当前li应该为红色,但CSS样式没有起作用</li>
  4. <li>给ul的其中一个li定义的CSS不起作用</li>
  5. </ul>

CSS样式:

  1. .test{width:360pxborder:1px solid #232323;list-style:none;}
  2. .test li{line-height:24pxmargin-top:8pxcolor:Blue;}
  3. .current{color:Red;}

效果图:

CSS效果图

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

让ul的其中一个li(当前li)起作用的方法

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

  1. .test li.current{color:Red;}

效果图:

CSS效果图

本文来源:【给ul的其中一个li定义的CSS不起作用(双重CSS)
思享SEO博客编辑转载,仅用于参考学习,如有侵权请联系本站修改删除!

扩展阅读

文字超链接旁边怎么加上小箭头图标

许多知名网站都在文字链的右边加一个箭头图标,例如Google站长管理后台,Alexa官网等,这样设计的好处是让链接更醒目,更容易辨认。 文字链右边加一个箭头图标的方法,多数人是使用css背景图来实现,包括上面提到的Google站长管理后台,Alexa......

textarea多文本输入框标签自带空格是怎么回事

textarea标签是用来定义一个多行的文本输入控件,在文本输入域中可以输入任意长度的文本。但是今天我在使用的时候,发现输入框默认就带了好几个空格,虽然可以删除,但一刷新页面就是带有空格。 这到底是怎么回事呢?,于是在网上了解了一下。原来是texta......

javascript实现部分内容的展开/收起

我们经常可以看到有的网站的文章有个导读,摘要板块,但其内容确是和正文重复的,如果出于SEO的考虑需要保留这个部分,我们可以收起/展开一部分内容,来提升用户体验 HTML代码示例 默认收起 <!DOCTYPE html> <html ......

与本文相关的文章

avatar
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址