nav-main li {color：#FFF;}

Question

请考虑以下HTML

<nav id="nav-main">
    <li> 
        <a href="javascript:void(0)"> 
           <img src="http://jsfiddle.net/img/initializing.png">
         <span>Sample Link</span>
       </a>
       Hide Me with CSS
   </li>
</nav>

是否可以使用CSS删除或隐藏使用CSS隐藏我？

我试过了：

#nav-main li a:after{
    content: "";
}

但没有运气。

http://jsfiddle.net/6powxzru/

我无法更改上面的HTML，因为这是一个动态生成的代码（带有JSP标记）。

Answer 1

我无法更改上面的html，因为这是一个动态生成的代码

更改font-size

#nav-main li {
  font-size: 0;
}
#nav-main li a {
  font-size: 12px;
}

<nav id="nav-main">
  <li>
    <a href="javascript:void(0)">
      <img src="http://jsfiddle.net/img/initializing.png" />
      <span>Sample Link</span>
    </a>
    Hide Me with CSS</li>
</nav>

Answer 2

实现此目的的一种方法是为visibility: hidden设置li，然后为visible内的a将其设置为li。

＆＃13;

#nav-main li {
  visibility: hidden;
}
#nav-main li a {
  visibility: visible;
}

＆＃13;

<nav id="nav-main">
  <li>
    <a href="javascript:void(0)">
      <img src="http://jsfiddle.net/img/initializing.png">
      <span>Sample Link</span>
    </a>Hide Me with CSS</li>
</nav>

＆＃13;

Answer 3

使用JS删除文本节点：

var node = document.querySelector('#nav-main > LI > A').nextSibling;
node.parentNode.removeChild(node);

Answer 4

你如何尝试以下方法（尽管如此可能不确定）：

使用整个容器的背景颜色导航中的颜色 li ，因此文本不再可见。
之后，您可以根据所需的颜色设置单个元素的样式。如果容器背景为白色，则以：
开头
nav-main li {color：#FFF;}

nav-main li a {color：＃000;}

等

Answer 5

来自W3Schools：

:: after选择器在每个所选元素的内容之后插入。

这意味着您在after＆＃34;元素中添加的任何内容＆＃34;将出现在 in 原始元素之后，在您的情况下是a标记。

此外，您无法使用未使用content属性添加的content属性删除文本。因此，要隐藏在a之外但在li内的特定事件（例如悬停）上的文字，您可以改为执行此类操作。

＆＃13;
＆＃13;
#nav-main li:after { content: "Hide Me With CSS"; } #nav-main li:hover:after { content: ""; }
＆＃13;
<nav id="nav-main"> <li> <a href="javascript:void(0)"> <img src="http://jsfiddle.net/img/initializing.png"> <span>Sample Link</span> </a> </li> </nav>
＆＃13;
＆＃13;
＆＃13;

用于隐藏文本的CSS选择器

5 个答案:

nav-main li {color：#FFF;}

nav-main li a {color：＃000;}