如何使用具有特定标题的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; 
}

如果我不能使用完整的标题,那么如果内部的输入元素,我怎样才能缩小选择范围.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正在寻找标题为"存储"或"管理"的元素.CSS不会匹配任何东西.

请查看属性选择器规范以获得更全面的描述:

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

如果您想要查看具有"存储管理"作为标题属性的元素,请使用[title="Storage Administration"].请注意,~(波形符号)从等式中删除.

在CSS3中,还有一些额外的属性选择器,例如*=子串匹配(参见:CSS3选择器的规范).其他人在其他StackOverflow答案中尝试类似的事情.

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

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