我如何用CSS替换文本使用这样的方法:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是(img[src*="IKON. "img"]),我需要使用一些可以代替文本的东西。
我必须使用[]才能让它工作。
< div级= >事实“pvw-title < / div >
我得把"事实"替换掉。
我如何用CSS替换文本使用这样的方法:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是(img[src*="IKON. "img"]),我需要使用一些可以代替文本的东西。
我必须使用[]才能让它工作。
< div级= >事实“pvw-title < / div >
我得把"事实"替换掉。
当前回答
八年后,当我试图使用Stylish浏览器扩展来更改一个网站(不是我的)上的某些内容时,我遇到了同样的挑战。这一次,我通过使用“inspect element”查看源代码,并基于此创建CSS代码,使其工作。
这是它以前的样子:
< table > < tbody > < tr > < td gridcell”角色= > <span标题=“在进展中”风格=“背景”右方:2px;text-align: center;width: 45px;显示:区块;超流:隐藏;文本overflow: ellipsis;“>进行中< /跨越> < / td > < / tr > < / tbody > - < table >
这是我用来修改样式的HTML和CSS的同一部分:
td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] { width: 100px!important; } <table> <tbody> <tr> <td role="gridcell"> <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span> </td> </tr> </tbody> </table>
你可以运行上面的代码,你会看到它工作(在Chrome测试)。
这就是我当初问这个问题时想要的结果。
我使用一些社区博客/Myspace类似的东西,当你的个人资料的样式是他们的CSS编辑器时,你唯一拥有的东西,这就是为什么我想根据风格选择它。
我在这里找到了答案:
高级CSS选择器-根据样式选择 CSS选择器的内联样式属性
其他回答
例子
<!DOCTYPE html>
<html>
<head>
<title>Devnote</title>
<style>
.replacedValue {
visibility: hidden;
position: relative;
}
.replacedValue:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "Devnote is developer answer solve. devnote.in";
}
</style>
</head>
<body>
<p class="replacedValue">Old Text Here</p>
</body>
</html>
输出
Devnote is developer answer solve. devnote.in
试试这个方法:
IDENTIFIER {
visibility: hidden;
position: relative;
}
IDENTIFIER::after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "NEW_CONTENT";
}
与我在其他每个答案中看到的不同,您不需要使用伪元素来将标记的内容替换为图像
<div class="pvw-title">Facts</div>
div.pvw-title { /* No :after or :before required */
content: url("your URL here");
}
或者你可以把'Facts'包在<span>上,如下所示:
.pvw-title span { 显示:没有; } .pvw-title:{后 内容:“你想加什么就加什么”; } < div class = " pvw-title " > < span >事实< / span > < / div >
这适用于我的内联文本。它在Firefox、Safari、Chrome和Opera上进行了测试。
<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>
span {
visibility: hidden;
word-spacing: -999px;
letter-spacing: -999px;
}
span:after {
content: "goodbye";
visibility: visible;
word-spacing: normal;
letter-spacing: normal;
}