如何计算网页中无序列表（ul）下子列表项（li）的数量

在网页开发中，有时候我们需要知道一个无序列表（ul）下包含了多少个子列表项（li）。以下是一些常见的方法来计算这个数量，以及它们各自的适用场景。

方法一：使用JavaScript

JavaScript 是网页开发中常用的脚本语言，可以轻松地访问和操作DOM元素。以下是一个简单的JavaScript代码示例，用于计算ul下li的数量：

var ulElement = document.querySelector('ul');
var liCount = ulElement.getElementsByTagName('li').length;
console.log('The number of li elements is: ' + liCount);

方法二：使用CSS选择器

CSS选择器也可以用来获取DOM元素的数量。以下是一个使用CSS选择器的例子，用于计算ul下li的数量：

var liCount = document.querySelectorAll('ul > li').length;
console.log('The number of li elements is: ' + liCount);

方法三：使用jQuery

jQuery 是一个流行的JavaScript库，它简化了DOM操作。以下是一个使用jQuery的例子，用于计算ul下li的数量：

$('ul > li').length;

方法四：使用纯CSS

虽然CSS本身不提供直接计算DOM元素数量的功能，但可以通过一些技巧间接实现。例如，可以通过设置一个特定的样式，然后使用JavaScript来检测这个样式是否被应用到了li元素上，从而推断出li的数量。

var ulElements = document.querySelectorAll('ul');
var liCount = 0;
ulElements.forEach(function(ul) {
    liCount += ul.querySelectorAll('li').length;