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正在寻找标题为＆＃34; Storage＆＃34;或完全＆＃34;管理＆＃34;。~~ CSS与任何东西都不匹配。

请查看属性选择器规范以获得更全面的说明：

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

如果您想特别关注＆＃34;存储管理＆＃34;作为title属性，然后使用[title="Storage Administration"]。请注意，~（代字号）将从等式中删除。

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

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

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

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

1 个答案: