diff --git a/learn/cascade/cascade-layers.html b/learn/cascade/cascade-layers.html new file mode 100644 index 00000000..bfbec7cf --- /dev/null +++ b/learn/cascade/cascade-layers.html @@ -0,0 +1,96 @@ + + + + + +
cascade layers demo
+
+ + + + + + +
+
+ A paragraph with a border and background +
+
+ +
+@layer firstLayer, secondLayer; + +p { /* 0-0-1 */ + background-color: red; + color: grey !important; + border: 5px inset purple; +} +p#addSpecificity { /* 1-0-1 */ + border-style: solid !important; +} + +@layer firstLayer { + #addSpecificity { /* 1-0-0 */ + background-color: blue; + color: white !important; + border-width: 5px; + border-style: dashed !important; + } +} + +@layer secondLayer { + p#addSpecificity { /* 1-0-1 */ + background-color: green; + color: orange !important; + border-width: 10px; + border-style: dotted !important; + } +} +
+ +
+<p id="addSpecificity"> + A paragraph with a border and background +</p> +
+ +
+
+
+ + + + diff --git a/learn/cascade/specificity-boxes.html b/learn/cascade/specificity-boxes.html index 6af96f2f..5e2647e0 100644 --- a/learn/cascade/specificity-boxes.html +++ b/learn/cascade/specificity-boxes.html @@ -10,37 +10,37 @@ @@ -34,18 +44,27 @@ +
+ @layer yellow, purple, green; - <textarea class="playable playable-css" style="height: 250px;"> -#outer div ul .nav a { - background-color: yellow; - padding: 5px; - display: inline-block; - margin-bottom: 10px; -} - -div div li a { - color: rebeccapurple; -} + @layer yellow { + #outer div ul .nav a { + background-color: yellow; + padding: 5px; + display: inline-block; + margin-bottom: 10px; + } + } + @layer purple { + div div li a { + color: rebeccapurple; + } + } + @layer green { + a { + color: lightgreen; + } + }