CSS3 all属性测试实例页面

回到相关文章 »

代码：

CSS代码：
article {
    background-color: #f0f3f9;
    color: green;
}
article > textarea {
    border: 1px solid #34538b;
    background-color: #ffffe0;
    color: red;
}
.initial > * {
    all: initial;
}
.inherit > * {
    all: inherit;
}
.unset > * {
    all: unset;
}
HTML代码：
all: <select id="select">
    <option value="">请选择</option>
    <option value="initial">initial</option>
    <option value="inherit">inherit</option>
    <option value="unset">unset</option>
</select>

<article>
    <h6>标题</h6>
    <p>p变文字</p>
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <textarea>文本域</textarea>
</article>
JS代码：
var article = document.querySelector('article');
if (article) {
    document.querySelector('#select').addEventListener('change', function() {
        article.className = this.value;    
    });
}

效果：

all:

标题

p变文字

  1. 有序列表1
  2. 有序列表2
  3. 有序列表3