Question

我在使用CSS方面遇到了一些麻烦，似乎无法找到解决方案。我有这个HTML

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

现在我想隐藏文本«点击关闭»，不隐藏div，也不隐藏其中的链接。

可以这样做吗？

Answer 1

可以在子元素上覆盖visibility属性，因此您可以执行此操作：

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

CSS：

#closelink {
    visibility:collapse;
}

#closelink a{
    visibility:visible;
}

结果如下：http://jsfiddle.net/pavloschris/Vva84/

Answer 2

.closelink {
  font-size: 0px;
}

.close-link a {
  font-size: 12px;
}

Answer 3

尝试

<div id="closelink">
   <a href="">Close</a>
   Click to close
</div>


#closelink {
    position: relative;
    left: -9999px;
}

#closelink a {
    position: relative;
    left: 9999px;
}

Answer 4

虽然有效，但您可以使用visibility:hidden代替visibility:collapse

Answer 5

避免子元素破坏到一个新行（就像使用visibility：hidden / collapse;和visibility：visible）一样，并避免在浏览器中绘制一个9999px块（通常不赞成，因为它是不必要的开销），试试这个：

<div id="closelink">
    <a href="">Close</a>
    Click to close
</div>


#closelink {
    position: relative;
    visibility: hidden;
}

#closelink a {
    position: absolute;
    left: 0;
    top: 0;
    visibility: visible;
}

您可以调整left: 0值以提供一些填充。

Answer 6

我能想到三种方法：

一个

(key in result)

两个

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <style type="text/css">

        #parent{
            opacity: 1;
        }
        .child{
            opacity: 0;
        }
        </style>
      </head>
      <body>

        <div id="parent">
                dkjfdkf
            <span class="child">Annoying text</span>
        </div>

      </body>
    </html>

三

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <style type="text/css">

        #parent{

        }
        .child{
            visibility: hidden;
        }
        </style>
      </head>
      <body>

        <div id="parent">
                dkjfdkf
            <span class="child">Annoying text</span>
        </div>

      </body>
    </html>

如果您希望图片始终位于页面上以保持结构，则不透明度最佳，但您不希望它可见。希望这有用。

隐藏元素中的文本节点，但不隐藏子元素

6 个答案: