在片段中,第三个h2不应该受到css的影响,那么为什么呢?
.a > div { color: blue; text-align: center; }
<div class="a">
<h2>Title</h2>
<div>
<h2>this shoud be center and blue</h2>
<div>
<h2>this should Not be center or blue</h2&
为什么<select> / <option>列表中的文本不受应用于父<html>元素的CSS影响( "item1“、"item2”的颜色没有改变)?所有<p>元素都会受到影响!
同样,这也是有效的:<select multiple style="color:red;">
:root {
color: red;
}
<p> this text is affected
<!-- but item1, item2, etc within this list are not affe
在下面的代码示例中,我希望看到控制台日志中的下划线。相反,我看到none。
如何从underline中的text-decoration属性提取#one .yo值
setTimeout(function() {
var $el = document.querySelectorAll('#one .yo')[0];
var css = getComputedStyle($el).cssText;
console.log("text-decoration is set to:");
console.log(/text\-decoration\:
我试图使用自定义的CSS属性更改dialog元素的backdrop的背景色,但不会。这是Chrome中的一个bug,还是有理由这样做?
document.querySelector('dialog').showModal();
:root {
--color-backdrop: red;
}
dialog::backdrop {
background: var(--color-backdrop);
}
<dialog>
<p>This is a dialog. My backdrop should be red.</p>
&
假设我有以下CSS:
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
我的标记是:
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
While I got red set directly on me