gpt4 book ai didi

javascript - insertRule ":before"除了一些

转载 作者:行者123 更新时间:2023-11-28 19:28:52 28 4
gpt4 key购买 nike

我可以使用 :

成功地“取消”所有包含“: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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com