我可以使用 :
成功地“取消”所有包含“:before {content:}”的规则document.styleSheets[0].insertRule('.main *:before {content: " "!important;}',0);
除了一些人之外，有没有一种方法可以做到这一点？ 说走就走 “.main .submain:before”没有被触及？
我正在按照建议尝试:
document.styleSheets[0].insertRule('.main *:not(.submain):before {content: " "!important;}',0);
不幸的是，它不起作用。 然后我尝试使用以下方法在以前“无效”的规则中插入新的内容属性:
document.styleSheets[0].insertRule('.main .submain:before {content: "\fxxx"!important;}',0);
那也不行。
CSS如下:
.main {
color: #bebedc;
overflow: hidden;
}
.main .submain:before{content:"\fzzz"}
.main .submain1:before{content:"\fxxx"}
.......................
.main .submain_n:before{content:"\fnnn"}
也许可以使用“querySelector('.submain')...”来做到这一点？ 非常感谢您的建议。
目标是用自定义的替换“video js”播放器的原生 CSS“:before content”。因此，我示例中的“.main”类实际上是“.video-js”类。
在完整的 HTML 树下面:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, maximum-scale = 1.0, minimum-scale=1.0,initial-scale=1.0">
<title>Video JS </title>
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
</head>
<body>
<video id="myPlayer" class="video-js vjs-default-skin " width="640" height="273" poster="https://vjs.zencdn.net/v/oceans.png" controls preload="auto"
data-setup='{}'>
<source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
</video>
<script>
document.styleSheets[0].insertRule('.video-js *:before {content: " "!important;}',0);//---this "nulls"------all pseudo elements
//document.styleSheets[0].insertRule('.video-js * :not(.vjs-big-play-button):before {content: " "!important;}',0);//--attempt to leave ".vjs-big-play-button" untouched
//document.styleSheets[0].insertRule('.video-js *.vjs-big-play-button:before {content: "\f101"!important;}',0);//--attempt to re-insert ".vjs-big-play-button" after "nulling"
</script>
</body>
</html>
最佳答案
CSS 选择器可以使用 :not() 取反伪类。 (然而，最好让原始的 content 属性从一开始就只应用于所需的元素。)
div:before {
content: "before ";
}
.main *:not(.submain):before {
content: "" !important;
}<div class="main">main
<div class="submain">submain</div>
<div class="foobar">foobar</div>
</div>关于javascript - insertRule ":before"除了一些，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55485938/