自定义层叠用法-html代码-BFW代码库

自定义层叠用法

代码语言：html

所属分类：其他

代码描述：自定义层叠用法

代码标签：

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/* defaults & overrides */
html {
  --btn-bg--default: blue;
}

button {
  background: var(--btn-bg--state, 
    var(--btn-bg, 
      var(--btn-bg--type, 
        var(--btn-bg--default)
      )
    )
  );
}

[disabled] {
  --btn-bg--state: gray;
}

.warn {
  --btn-bg--type: maroon;
}

.go {
  --btn-bg--type: darkgreen;
}

form {
  --btn-bg--default: deeppink;
}

body {
  padding: 1em;
  max-width: 45em;
  margin: 0 auto;
}

button {
  color: white;
  border: thin solid black;
  font: inherit;
  margin: 0.5em;
  padding: 0.5em 2em;
}
</style>

</head>
<body translate="no">
<h1>Custom Cascades</h1>
<p>by defining a cascade of custom properties,<br>
you can determine which <em>intent</em> should take priority --<br>
without worrying about the specificity<br>
of how that value is defined.<br>
in this case, my cascade includes:</p>
<ul>
<li><code>--btn-bg--state</code></li>
<li><code>--btn-bg</code></li>
<li><code>--btn-bg--type</code></li>
<li><code>--btn-bg--default</code></li>
</ul>
<p>Our default button is falling all the way back<br>
to the <code>--btn-bg--default</code> defined on <code>html</code>.</p>
<p><button type="button">default</button></p>
<p>Adding the <code>disabled</code> attribute<br>
always overrides any other button colors --<br>
no matter where they are defined.</p>
<p><button type="button" disabled>disabled</button></p>
<p>We can create button types using <code>--btn-bg--type</code>,<br>
and it will o.........完整代码请登录后点击上方下载按钮下载查看