1

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

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

正确的 CSS 语法（如果有的话）一直在逃避我。

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

input[type=text]

所以我可以假设（希望...... gulp！）我可以使用类似的东西：

input[val='']

然而：

1）我不确定在这些括号内使用撇号/引号是否合法（再次调用 CSS 选择器的那个区域是什么？）

2）我不知道如何在这些括号内放置一个选择器（如果可能的话），因为实际的“tr”是我想要定位的，只是带有 td 子项的“tr”s，输入子项为空 val .

沉迷于随机语法，我尝试了：

tr[td input val=]

出乎我的意料，我是否发现这显然不起作用，然后我意识到我不知道如何继续，如果我想严格地在 CSS 中完成这个。

~快速呼吸

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

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

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

---------------------关于ALNITAK的答案的编辑------------------------

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

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

我检查了我的父母人数，一切都应该在那里。可能会干扰的唯一另一件事是，默认情况下我在值中嵌入了剃刀（尽管它们在页面开始时被明确分配了空字符串，所以应该没问题）。以防万一，尽管我也尝试过：

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

但是，唉，无济于事。

4

4 回答 4

1

如果我理解正确：

你不能在 CSS 中做你想做的事，反正现在还不行。

您正在寻找的是一个 css 父选择器。

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

通过使用选择器：

tr td input[value='']

您将选择输入，而不是 <tr>。

实现您想要的一种方法是让某些东西“监视”您所在的页面（来自 javascript）并在打印时将一个类应用于您想要隐藏的任何内容。然后在您的打印样式表中使用该类来隐藏！

于 2013-03-22T16:17:01.793 回答
1

纯选择器无法做到这一点，因为选择器的最终结果始终是匹配的子节点，而不是它们的祖先。

您需要找到那些匹配的子节点，然后再次爬回树上，例如在 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 == '';
})....
于 2013-03-22T16:18:11.920 回答
1

你的散文翻译成这个 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";
}
于 2013-03-22T16:21:15.260 回答
0

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

描述：选择至少包含一个与指定选择器匹配的元素的元素。

$('tr:has(td input[value=""])').css({color:'red'});
于 2013-03-22T16:21:33.450 回答