css3中单数li的写法是什么

101 阅读 0 评论 67 点赞

我是靠谱客的博主悦耳含羞草，最近开发中收集的这篇文章主要介绍css3中单数li的写法是什么，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3中单数li的写法是什么

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

因此写法是：

li:nth-child(odd)
登录后复制

示例如下：

<!DOCTYPE html>
<html>
<head>
<style> 
li:nth-child(odd)
{
background:#ff0000;
}
</style>
</head>
<body>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
登录后复制

输出结果：