html条件选择语句
在HTML5网页中，实现条件筛选的方法有很多，这里我们主要介绍两种常见的方法：使用JavaScript和CSS3，这两种方法都可以实现对网页元素的筛选和过滤，但它们的实现原理和适用场景有所不同，下面分别详细介绍这两种方法。
（图片来源网络，侵删）
1、使用JavaScript实现条件筛选
JavaScript是一种广泛应用于网页开发的脚本语言，可以实现网页的动态效果和与用户的交互，在HTML5网页中，我们可以使用JavaScript来实现条件筛选，具体步骤如下：
（1）创建一个HTML文件，引入所需的CSS和JavaScript文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>条件筛选示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="text" id="search" placeholder="请输入关键词">
<ul id="list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
<li>柠檬</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
（2）编写CSS样式。
/* style.css */
.container {
width: 300px;
margin: 0 auto;
}
#search {
width: 100%;
height: 30px;
border: 1px solid #ccc;
padding: 0 5px;
}
#list {
liststyle: none;
padding: 0;
margin: 10px 0;
}
（3）编写JavaScript代码。
// script.js
const searchInput = document.getElementById('search');
const listItems = document.getElementById('list').getElementsByTagName('li');
let filteredList = Array.from(listItems); // 复制一份原始列表，用于筛选后的显示
searchInput.addEventListener('input', function() {
const keyword = this.value.trim().toLowerCase(); // 获取用户输入的关键词，并转换为小写字母
if (!keyword) { // 如果用户没有输入关键词，则显示原始列表
filteredList = Array.from(listItems); // 恢复原始列表的引用
} else { // 如果用户输入了关键词，则进行筛选操作
filteredList = listItems.filter(function(item) { // 使用filter方法筛选出符合条件的元素
return item.textContent.toLowerCase().includes(keyword); // 判断元素的内容是否包含关键词，并转换为小写字母进行比较
});
}
displayFilteredList(); // 显示筛选后的结果
});
function displayFilteredList() { // 定义一个函数，用于显示筛选后的结果
const listContainer = document.getElementById('list'); // 获取列表容器元素
listContainer.innerHTML = ''; // 清空列表容器的内容
filteredList.forEach(function(item) { // 遍历筛选后的列表元素，并将它们添加到列表容器中
listContainer.appendChild(item);
});
}
以上代码实现了一个简单的条件筛选功能，当用户在搜索框中输入关键词时，页面会实时显示包含该关键词的元素，这种方法适用于需要实时筛选的情况，但需要注意的是，每次筛选都会重新渲染整个列表，可能会影响性能，如果列表数据量较大，可以考虑使用其他优化方法。
2、使用CSS3实现条件筛选
CSS3提供了一些属性和选择器，可以实现对网页元素的筛选和过滤，这种方法不需要编写JavaScript代码，但实现的功能相对有限，下面是一个使用CSS3实现条件筛选的示例：
（1）修改HTML结构，为列表项添加一个类名item。
<!... >
<ul id="list">
<li class="item">苹果</li>
<li class="item">香蕉</li>
<li class="item">橙子</li>
<li class="item">葡萄</li>
<li class="item">柠檬</li>
</ul>
<!... >
（2）编写CSS样式。
/* style.css */
#list li { /* 默认情况下，隐藏所有列表项 */ }
#list li[datakeyword*="苹果"] { /* 如果列表项的datakeyword属性包含“苹果”，则显示该列表项 */ }
#list li[datakeyword*="香蕉"] { /* 如果列表项的datakeyword属性包含“香蕉”，则显示该列表项 */ }
#list li[datakeyword*="橙子"] { /* 如果列表项的datakeyword属性包含“橙子”，则显示该列表项 */ }
#list li[datakeyword*="葡萄"] { /* 如果列表项的datakeyword属性包含“葡萄”，则显示该列表项 */ }
#list li[datakeyword*="柠檬"] { /* 如果列表项的datakeyword属性包含“柠檬”，则显示该列表项 */ }
