首页 新闻 搜索 专区 学院

CSS 多条件筛选

0
悬赏园豆:50 [待解决问题]

<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
    tr td:not([style*="display:none"]):last-child{
      background-color: red;
    }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td role="gridcell" style="text-align:left;" title="5" aria-describedby="gridTable_rn">5</td>
<td role="gridcell" style="display:none;" title="8888" aria-describedby="gridTable_OrganizeId">8888</td>
<td role="gridcell" style="text-align:left;" title="suzhou" aria-describedby="gridTable_EnCode">suzhou</td>
<td role="gridcell" style="text-align:left;" title="苏州" aria-describedby="gridTable_ShortName">苏州</td>
<td role="gridcell" style="text-align:left;" title="互联网" aria-describedby="gridTable_Nature">互联网</td>
<td role="gridcell" style="text-align:left;" title="" aria-describedby="gridTable_Manager">&nbsp;</td>
<td role="gridcell" style="text-align:left;" title="" aria-describedby="gridTable_Fax">&nbsp;</td>
<td role="gridcell" style="text-align:left;" title="" aria-describedby="gridTable_Description">非常漂亮</td>
<td role="gridcell" style="display:none;" title="1" aria-describedby="gridTable_level">1</td>
<td role="gridcell" style="display:none;" title="5" aria-describedby="gridTable_lft">5</td>
<td role="gridcell" style="display:none;" title="999996" aria-describedby="gridTable_rgt">999996</td>
<td role="gridcell" style="display:none;" title="true" aria-describedby="gridTable_isLeaf">true</td>
<td role="gridcell" style="display:none;" title="true" aria-describedby="gridTable_expanded">true</td>
<td role="gridcell" style="display:none;" title="" aria-describedby="gridTable_loaded">&nbsp;</td>
<td role="gridcell" style="display:none;" title="" aria-describedby="gridTable_icon">&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

 

如何用这种方式筛选出 标注黄底 的这个元素。

逻辑:先把影藏的元素过滤掉 td:not([style*="display:none"]),在这个基础上,在筛选出最后一个td元素  :last-child

具体代码如何实现,请大神指导!

css
问题补充:

请用纯CSS实现。

248705519的主页 248705519 | 初学一级 | 园豆:152
提问于:2017-12-18 11:14
< >
分享
所有回答(1)
0

tr td:nth-last-child(1 of :not([style*="display:none"]))

by.Genesis | 园豆:2315 (老鸟四级) | 2017-12-18 12:15

非常感谢你的回答!

试了试,不行呀,咋回事?

支持(0) 反对(0) 248705519 | 园豆:152 (初学一级) | 2017-12-18 14:20

对了, CSS 里面 有 of 这个关键字吗?

支持(0) 反对(0) 248705519 | 园豆:152 (初学一级) | 2017-12-18 14:31

@248705519: 你用 safari 试试 目前只有 safari 支持 of 关键字

支持(0) 反对(0) by.Genesis | 园豆:2315 (老鸟四级) | 2017-12-18 14:33

@by.Genesis: 那兼容性就差点了,还有其他方式吗?求教!

支持(0) 反对(0) 248705519 | 园豆:152 (初学一级) | 2017-12-18 15:32

@248705519: 那你估计得用 jQuery 了 $('tr td').filter(':visible').last().css('background-color', 'red')

支持(0) 反对(0) by.Genesis | 园豆:2315 (老鸟四级) | 2017-12-18 15:34

@by.Genesis: 纯CSS有没有可能实现?

支持(0) 反对(0) 248705519 | 园豆:152 (初学一级) | 2017-12-18 18:38

@248705519: 为什么新的规范会提出这么一种新的选择器,就是因为以往的选择器不能满足特定需求了,所以以我所了解的在 Selectors Level 3 根本不能实现

支持(0) 反对(0) by.Genesis | 园豆:2315 (老鸟四级) | 2017-12-19 09:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册