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

Question

我想隐藏这个 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; 
}

如果我不能使用完整的标题，那么如果 input 元素在 .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>

Answer 1

您正在使用的属性选择器没有按照您期望的方式工作。当您放置 [title~="Storage Administration"] 时，CSS 正在寻找标题恰好是“Storage”或恰好是“Administration”的元素。CSS 将不匹配任何东西。

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

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

如果您想要特别查找具有“Storage Administration”作为 title 属性的元素，请使用 [title="Storage Administration"]。请注意，~(代字号)已从等式中删除。

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

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

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