我如何用CSS替换文本使用这样的方法:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

而不是(img[src*="IKON. "img"]),我需要使用一些可以代替文本的东西。

我必须使用[]才能让它工作。

< div级= >事实“pvw-title < / div >

我得把"事实"替换掉。


当前回答

如果您只是想显示不同的文本或图像,请保持标记为空,并将内容写入多个数据属性,如<span data-text1="Hello" data-text2="Bye"></span>。 使用一个伪类显示它们:before {content: attr(data-text1)}

现在你有很多不同的方法在它们之间切换。我将它们与媒体查询结合使用,以实现响应式设计方法,将导航的名称更改为图标。

Jsfiddle演示和示例

它可能不能完美地回答这个问题,但它满足了我的需求,也许也满足了其他人的需求。

其他回答

你不能,嗯,你可以。

.pvw-title:after {
  content: "Test";
}

这将在元素的当前内容之后插入内容。它实际上并不替换它,但您可以选择一个空的div,并使用CSS添加所有的内容。

虽然你或多或少可以,但你不应该这样做。实际内容应写入文件。content属性主要用于小型标记,比如文本周围的引号应该被引用。

实现这一点的方法是在CSS内容中添加行高。这将使块显示在隐藏的上方,因此这将不会隐藏更改的文本。

之前使用的例子:

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

我有一个问题,我必须替换链接的文本,但我不能使用JavaScript,也不能直接更改超链接的文本,因为它是从XML编译下来的。此外,我不能使用伪元素,或者当我尝试它们时,它们似乎不工作。

基本上,我把我想要的文本放到一个span中,把锚标签放在它下面,并在div中包装。我基本上通过CSS向上移动锚标签,然后使字体透明。现在,当您将鼠标悬停在跨度上时,它就像一个链接一样“起作用”。这是一种非常粗糙的方法,但这就是你如何使用不同文本的链接…

这是我是如何解决这个问题的

我的HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

我的CSS

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

CSS将需要根据您的需求进行更改,但这是完成您要求的一般方法。

使用伪元素,该方法不需要原始元素的知识,也不需要任何额外的标记。

#someElement{
    color: transparent; /* You may need to change this color */
    position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
    content: "New text";
    color: initial;
    position: absolute;
    top: 0;
    left: 0;
}

强制性:这是一个hack: CSS不是做这件事的正确地方,但在某些情况下——例如,你在iframe中有一个只能由CSS定制的第三方库——这种hack是唯一的选择。

您可以通过CSS替换文本。让我们用CSS将一个带有单词“hello”的绿色按钮替换为一个带有单词“goodbye”的红色按钮。

之前:

后:

现场演示见http://jsfiddle.net/ZBj2m/274/:

这是我们的绿色按钮:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

现在让我们隐藏原来的元素,但随后添加另一个块元素:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

注意:

我们需要显式地将其标记为块元素,'after'元素默认为内联元素 我们需要通过调整伪元素的位置来补偿原始元素。 我们必须隐藏原始元素,并使用可见性显示伪元素。注意显示:原始元素上的none无效。