我需要什么CSS规则来隐藏"其子元素"td"'有子元素"input&qu

What CSS rule do I need to hide "tr" elements whose children "td"'s have child "input" elements with empty value attributes?

本文关键字：quot 元素 td qu input 规则 CSS 隐藏 什么      更新时间：2023-09-26

我意识到问题的标题有点令人困惑，但实际上，我的意思是问我到底输入了什么。

我正在尝试编写一个用于打印的CSS文件(恶心上升)，我想消除不必要行的空白(必要性，或者更确切地说，缺乏空白，由具有空值的输入字段决定)。

正确的CSS语法(如果有的话)总是让我困惑。

我以前使用过这样的选择器:

input[type=text]

所以我可以假设(希望…)，我可以使用如下命令:

input[val='']
然而:

1)我不确定在括号内使用撇号/引号是否合法(CSS选择器的那个区域叫什么来着?)

2)我不知道如何将选择器放在这些括号内(如果可能的话)，因为实际的"tr"是我想要的目标，只是"tr"与td子节点，输入子节点与空值。

沉浸在随机的语法中，我试着:

tr[td input val=]

非常不让我惊讶的是，我发现这显然不起作用，然后我意识到我不知道如何继续，如果我想在CSS中完成这一点。

~ 快速呼吸

好吧，我意识到我对CSS要求太多了，但如果它的选择器系统不是那么强大，我甚至不会认为这是可能的。

最后，我已经实现了javascript, jQuery，甚至服务器端c# .net (WebMatrix)，所以如果这个答案最好使用这些其他语言来解决，我不介意，我只想要最简单干净的解决方案，如果可能的话，因为我使用的任何脚本方法都需要在其中的所有元素中添加另一个类，并且有很多，更不用说脚本本身了。

一如既往，任何帮助都是非常感谢的。

--------------------- 编辑关于猎户座的回答 ------------------------

我试图在window.print(); JavaScript命令之前添加以下jQuery:

$('tr > td > input[value=""]').parent().parent().css('display', 'none');
$('tr > td > input[value=""]').parent().parent().css('visibility', 'hidden');

我已经检查了我的父母，一切都应该在那里。唯一可能干扰的另一件事是，默认情况下，我在值中嵌入了razor(尽管它们在页面开始时显式地分配了空字符串，所以应该没问题)。以防万一，我也试过:

$('tr > td > input[value=null]').parent().parent().css('display', 'none');
$('tr > td > input[value=null]').parent().parent().css('visibility', 'hidden');

对于纯选择器不能这样做，因为选择器的最终结果始终是匹配的子节点，而不是它们的祖先节点。

你需要找到那些匹配的子节点，然后再次爬回树，例如在jQuery中:

$('tr > td > input[value=""]').parent().parent().css('color', 'red');

如果你愿意，可以用.closest('tr')代替.parent().parent()。

同样使用jQuery，您可以使用.has()函数创建一个链，匹配包含特定子元素的元素:

$('tr').has('> td > input[value=""]').css('color', 'red');

.has()函数比使用:has伪选择器更有效，尽管我希望它们都不会像上面在现代浏览器上利用document.querySelectorAll的完整选择器那样有效。

如果你不能让input[value=""]部分工作，试试这个:

$('tr > td > input').filter(function() {
    return this.value == '';
})....

如果我没理解错的话:

你不能在CSS中做你想做的，至少现在还不行。

你要找的是一个css父选择器。

http://css-tricks.com/parent-selectors-in-css/

使用选择器:

tr td input[value='']

您将选择输入，而不是

s。

实现你想要的一种方法是让某些东西"监视"你所处的页面(从javascript)，并在打印时应用一个类来隐藏任何你想要的东西。然后在打印样式表中使用这个类来隐藏!

你的散文翻译成这样的CSS:

!tr>td>input:matches(:not([value]),[value=''])

然而，!和:matches都是尚未实现的CSS4选择器。你最好使用JavaScript:

var qsa = document.querySelectorAll("tr>td>input"), l=qsa.length, i;
for( i=0; i<l; i++) {
    if( qsa[i].value == '') qsa[i].parentNode.parentNode.style.display = "none";
}

尝试使用:has()选择器:http://api.jquery.com/has-selector/

Description:选择包含至少一个与指定选择器匹配的元素的元素。

$('tr:has(td input[value=""])').css({color:'red'});
相关文章：