[英]How can i use :not to give some specific CSS to parent element not to the child and sub-child?
Hello this is the code你好这是代码
<div class="content-wrapper">
<span>Lorem</span>
<span>
<strong style="font-size: 18px">
sometext
<span style="font-size: 12px">
<em>ipsum</em>
</span>
</strong>
</span>
<span style="font-size: 14px">dolar sit amet</span>
<span class="input__math">
<span class="katex">
<span class="katex-mathml">
<span style="font-size: 14px">
<strong>x</strong>
<sup style="font-size: 10px">2</sup>
</span>
+
<span style="font-size: 14px">
<strong>y</strong>
<sup style="font-size: 10px">2</sup>
</span>
=
<span>
<span style="font-size: 16px">
<strong>
1
</strong>
</span>
</span>
</span>
</span>
</span>
</div>
and i am trying to add some CSS like font-size: 20px;important;
我正在尝试添加一些 CSS 像
font-size: 20px;important;
inside all the content of content-wrapper class except math-content like whatever is coming inside the input__math class sholud not change.在内容包装器class 的所有内容中,除了数学内容(如input__math class 中的任何内容)不应更改。 i tried like this
我试过这样
.content-wrapper *:not(.input__math *) {
font-size: 20px !important;
}
But it's not working, Please help if you have any solution但它不起作用,如果您有任何解决方案,请帮助
here i have created a fiddle with some demo content with inline-css, please check在这里,我用 inline-css 创建了一些演示内容,请检查
https://jsfiddle.net/u5xb49Lr/4/ https://jsfiddle.net/u5xb49Lr/4/
If I understand you correctly, you do not want the font-size of.input__math or the font-size of all.input__math's child elements to change.如果我理解正确,您不希望 .input__math的字体大小或 all.input__math 的子元素的字体大小发生变化。
Using:not(.input__math) won't work here, since this will not target child elements of.input__math (because these, although they are children of 'input__math', don't have the class 'input__math' themselves). using:not(.input__math) 在这里不起作用,因为这不会针对 .input__math 的子元素(因为这些,虽然它们是 'input__math' 的子元素,但它们本身没有 class 'input__math' )。
Here's a different solution.这是一个不同的解决方案。 CSS you apply to child elements will override CSS applied to parent elements.
您应用于子元素的 CSS 将覆盖应用于父元素的 CSS。 Therefore, you could do this:
因此,您可以这样做:
.content-wrapper {
font-size: 20px;
}
And then this:然后这个:
.input__math {
font-size: <other font size>;
}
Try this CSS style:试试这个 CSS 风格:
.content-wrapper:not(.input__math) {
font-size: 20px !important;
}
That should do the job.那应该做的工作。 There's no need for * sign in there.
那里不需要 * 登录。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.