如何使用CSS3中的结构伪类选择器设置无序列表

 时间:2026-02-15 07:25:44

1、第一步,双击打开HBuilderX编辑器,接着新建静态页面并修改title属性值,如下图所示:

如何使用CSS3中的结构伪类选择器设置无序列表

2、第二步,在body元素插入一个div标签元素,并在div元素中添加一个无序列表,如下图所示:

如何使用CSS3中的结构伪类选择器设置无序列表

3、第三步,在titile标签下方,插入一个style,设置全局样式和ul元素的样式,如下图所示:

如何使用CSS3中的结构伪类选择器设置无序列表

4、第四步,使用li元素选择器,设置子项的样式,如宽度、高度、行高、字体属性等,如下图所示:

如何使用CSS3中的结构伪类选择器设置无序列表

5、第五步,保存代码并打开浏览器预览页面,可以发现六行五列显示,如下图所示:

如何使用CSS3中的结构伪类选择器设置无序列表

6、第六步,再使用ul li:nth-child(2n+1),设置奇数个li的样式,如下图所示:

如何使用CSS3中的结构伪类选择器设置无序列表

  • css3鼠标悬停文字标题切换对应内容
  • Filezilla如何导入站点
  • css制作五边形
  • Dreamweaver用户界面的简介
  • css 图片和文字对齐的办法
  • 热门搜索
    洋槐花怎么做好吃 怎么快速瘦腿 智齿怎么拔 应聘自我介绍怎么说 产后便秘怎么办 肚子疼怎么办快速止疼 苹果手机怎么解锁 北京邮电大学怎么样 电钻怎么换钻头 王者荣耀怎么更新