css3新增选择器---display:none和visible:hidden的区别

一、选择器总结

(1)元素选择器(文档的元素,如a,ul,p,div等)

li{border:1px solid #000;}

(2) 通配符(选择所有元素,也可以选择某个元素下的所有元素)

 *{margin:0; padding:0;} 

(3) 类选择器

使用类选择器之前需要在html元素上定义类名

<li class="active important items">2</li> .important {font-weight: bold; color: yellow;
类选择器还可以结合元素选择器来使用 p.items {color: red;}
多类选择器 .important.items {background:#ccc;}

(4)id选择器

<li id="important">2</li>

#important {font-weight: bold; color: yellow;}

(5) 后代选择器(E F)(选择了E元素的所有后代

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的示例代码,演示了如何在 HTML 表单中进行搜索后行的选中状态不变。您可以根据自己的需求进行修改和优化。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>搜索表格</title> <style> .highlight { background-color: yellow; } </style> <script> window.onload = function() { // 获取表格元素 var table = document.getElementById('data-table'); // 获取搜索框元素 var searchBox = document.getElementById('search-box'); // 获取隐藏的 input 元素,用于保存搜索关键字 var keywordInput = document.getElementById('keyword-input'); // 遍历表格中的每一行元素,保存原始状态 for (var i = 1; i < table.rows.length; i++) { table.rows[i].setAttribute('data-original', table.rows[i].innerHTML); } // 监听搜索框的输入事件 searchBox.addEventListener('input', function() { // 获取用户输入的关键字 var keyword = this.value.toLowerCase().trim(); // 将关键字保存到隐藏的 input 中 keywordInput.value = keyword; // 遍历表格中的每一行元素,判断是否包含关键字 for (var i = 1; i < table.rows.length; i++) { var row = table.rows[i]; var originalHTML = row.getAttribute('data-original'); var html = originalHTML.toLowerCase(); if (html.indexOf(keyword) !== -1) { // 如果包含关键字,将该行的选中状态设置为原始状态 row.innerHTML = originalHTML; } else { // 如果不包含关键字,将该行的选中状态设置为未选中状态 row.innerHTML = '<td colspan="3">未找到匹配的结果</td>'; } } }); } </script> </head> <body> <input type="text" id="search-box" placeholder="请输入搜索关键字"> <input type="hidden" id="keyword-input"> <table id="data-table"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> <tr> <td>王五</td> <td>22</td> <td>男</td> </tr> </tbody> </table> </body> </html> ``` 在这个示例代码中,我们使用了一个隐藏的 input 元素来保存用户输入的关键字,遍历了表格中的每一行元素,保存了每一行的原始状态,监听了搜索框的输入事件,判断每一行是否包含用户输入的关键字,并将选中状态设置为相应的状态。 注意:这只是一个简单的示例代码,实际应用中可能需要根据具体需求进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值