小程序开发

css控制一个ul标签下的指定li标签样式

2019-02-11 14:19

在网站开发中,我们经常会遇到更改ui中不同的li的宽度、背景、位置的情况,其实获取节点元素的功能在css3中就可以轻易的实现了,再不用编写相对复杂的js代码。下面我们就看下具体的代码。

css控制一个ul标签下的指定li标签样式

nth-child

返回值:Array<Element(s)>:nth-child

匹配其父元素下的第N个子或奇偶元素。':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!
 

代码如下

ul li:nth-child(5){margin-left:0;} 指定第几个
ul li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
ul li:nth-child(odd){background:orange;}   基数
ul li:nth-child(even){background:orange;}  偶数

另外获取列表中第一个和最有一个元素,可以用下面的方法实现:

ul li:first-child{margin-left:0;}  第一个
ul li:last-child{margin-left:0;}   最后一个

更多实用css3代码,请关注思捷智联官方网站http://webbj.cn/

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。
小程序开发:webbj.cn北京小程序开发公司,免费获取思维导图!
    相关阅读
  • PHP与ASP.net两大网站开发架构优势对比
    PHP与ASP.net两大网站开发架构优势对比

    PHP与ASP.net两大网站开发架构优势对比 同是目前主流的网站开发架构,PHP与ASP.net各有哪些技术特点呢?他们分别适用于哪些不同的环境中呢? PHP架构优点 PHP比较容易学开发速度比较快,...

  • 网站改版或重建后该如何保持排名
    网站改版或重建后该如何保持排名

    很多时候,我们的网站需要改版或者重建。网站改版或者重建的目的很明确,一是为了提供更好更优质的内容或者服务,给用户带来更好的用户体验度;二是为了优化网站,提升网站在搜...

  • 北京网站建设建站流程
    北京网站建设建站流程

    第一步 客户提出需求 客户提供相关文字及图片资料:同时希望您能够告诉我您喜欢的网站类型及实例; 1.公司简介,各种联系方式; 2.尽量用文字详细说明制作的框架结构; 3.产品或项...

  • 选择seo关键词要避免的大误区
    选择seo关键词要避免的大误区

    在网络营销中,无论是做竞价广告和搜索引擎优化都需要选取关键词,但是在选取关键词中存在了误区,企业往往投放了大量的资金,也带来的了流量,但是没有转化,网络营销学院...

感受专业服务,从来电咨询开始
010-6975976518611391767
在线咨询在线咨询