如何使用具有特定标题的 css 隐藏元素？答案

【问题标题】：How to hide element with css with specific title?如何使用具有特定标题的 css 隐藏元素？
【发布时间】：2015-07-08 21:32:08
【问题描述】：

我想隐藏这个input 元素。事实上，我很少有他们，我必须使用他们的名字。

<input type="image" alt="Storage Administration" src="App_Themes/Default/topmenu$store$png$ffffff$000000.IconHandler.axd" title="Storage Administration" id="ctl00_ctl00_TopMenuCph_btnAdm" name="ctl00$ctl00$TopMenuCph$btnAdm">

有人可以建议如何使用完整的标题或 alt 吗？

[title ~= "Storage"] { 
    display: none; 
}

效果很好，但是在 Firefox 和 chrome 中不起作用。

[title ~= "Storage Administration"] { 
    display: none; 
}

如果我不能使用完整的标题，那么如果输入元素在 .topMenu > div > li 内部，我该如何缩小选择范围？

<ul class="topMenu">
    <div id="ctl00_ctl00_TopMenuCph_panTab">
        <li><input type="image" alt="Storage Administration" src="App_Themes/Default/topmenu$store$png$ffffff$000000.IconHandler.axd" title="Storage Administration" id="ctl00_ctl00_TopMenuCph_btnAdm" name="ctl00$ctl00$TopMenuCph$btnAdm"></li>
        <li><input type="image" alt="Envelope Templates" src="App_Themes/Default/topmenu$envelope$png$ffffff$000000.IconHandler.axd" title="Envelope Templates" id="ctl00_ctl00_TopMenuCph_btnEnv" name="ctl00$ctl00$TopMenuCph$btnEnv"></li>
        <li><input type="image" alt="My Documents" src="App_Themes/Default/topmenu$mydocuments$png$ffffff$000000.IconHandler.axd" title="My Documents" id="ctl00_ctl00_TopMenuCph_btnMyD" name="ctl00$ctl00$TopMenuCph$btnMyD"></li>
    </div>
</ul>

【问题讨论】：

我知道不一样，但你能用nth-of-type()吗？
不，我不能。我需要隐藏所有具有特定标题的 li。在某些情况下，整个 ul 会被不同的 li 替换，我需要离开它们。在某些情况下我需要隐藏所有 li 的
好的，顺便
:-) 我不是 html 的作者。我只是在修复一些东西......
这条评论是题外话，但<ul>元素的唯一“合法”直接后代是<li>元素，<div>元素不允许作为<ul>元素的直接后代。

标签： css css-selectors

【解决方案1】：

您使用的属性选择器没有按照您期望的方式工作。当您输入[title~="Storage Administration"] 时，~~CSS 正在寻找标题为“Storage”或“Administration”的元素。~~CSS 不会匹配任何内容。

查看属性选择器规范以获得更详尽的描述：

http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

如果您想特别查找以“存储管理”作为标题属性的元素，请使用[title="Storage Administration"]。请注意，~（波浪号）已从等式中删除。

在 CSS3 中，还有一些额外的属性选择器，例如 *= 子字符串匹配（参见：spec on CSS3 selectors）。其他人正在this other StackOverflow answer 中尝试类似的事情。

这是一个使用他们的逻辑的例子。不知道这是否适合您，但可以尝试这些其他选项。请务必检查浏览器兼容性，因为我不确定这些支持是什么。

[title^='Storage'], [title*=' Storage']{
    display: none;
}

【讨论】：

谢谢。这是否意味着[title ~= "Storage"] 不会选择标题为 Storage2 的元素？有没有办法让一行css代码选择标题为“Storage”、“Storage2”等的元素？
我用一些额外的 cmets 更新了答案。你是正确的~="Storage" 不会匹配“Storage2”。我认为您可以使用^= 或*= 或两者的组合来完成它。如果其中任何一个对您有用，请告诉我，我会为未来的访问者更新答案。
实际上，[title~="Storage Administration"] 是一个无效的选择器。正如您链接到的规范中所述，“如果使用此选择器，则值中的单词不得包含空格（因为它们由空格分隔）。”
另外，您的两个规范链接都已过期。当前的 CSS2.1 规范在这里：w3.org/TR/CSS21/selector.html 和 Selectors 3 has been out of draft for several years now。目前的草案是 Selectors 4。我不完全确定 Selectors 3 的 2013 ED 与 2011 REC 有何不同（甚至在勘误表中也没有）。
干杯@BoltClock。感谢您为我澄清 ~= 功能，我误解了描述。我已经更新了我的答案以反映这一点并更新了规范链接。我猜在所有持续支持的浏览器中使用它们可能是安全的。感谢您的加入。