Question

我可以使用：

成功地使所有包含“：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”替换为自定义CSS。因此，示例中的“ .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>

Answer 1

可以使用:not()伪类来否定CSS选择器。（不过，最好从一开始就将原始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>

Answer 2

尝试通过在线代码解决此任务失败后，我想到了以下内容：

首先-使用：

MediaSession

将{content：“”;}插入到每个元素之前，即使之前不存在（实际上应该是这样）。

但是：

document.styleSheets[0].insertRule('.video-js *:before {content: " "!important;}',0);

仅在定义的内容排除规则“ .vjs-icon-placeholder”的情况下“清空”所有内容

我无法解释-为什么这次没有插入额外的“：before”。

下一行：

document.styleSheets[0].insertRule('.video-js * :not(.vjs-icon-placeholder ):before {content: " "!important;}',0);

仅“清除”“ .vjs-icon-placeholder”规则的所有内容。我无法将这两个步骤合而为一。

最后一步-通过复制要保留的元素的规则与初始内容（“清空”之前）来创建新样式表。

就我而言：

document.styleSheets[0].insertRule('.video-js * .vjs-icon-placeholder:before {content: " "!important;}',0);

不是超级优雅的解决方案，但它可以工作。

除了某些外，insertRule“：before”用于所有

2 个答案: