JSFiddle - React, Tailwind, and code Playground

by smallone1

HTML

<!--測試獨特性、實作選擇器、實作字體相關-->
<ul><b>測試獨特性</b>
  <li class="ex1">1aaaaa</li>
  <li class="ex3" id="id2">2aaaaa</li>
  <li class="ex3">3aaaaa</li>
  <li>4aaaaa</li>
  <li>5aaaaa</li>
</ul>
<hr>
<!--實作總和字體相關語法、雲端字型(進階選擇器)-->
<div class="fontAll">
  <p>fffff</p>
  <p>ggggg</p>
</div>
<hr>
<!--實作雲端字型-->
<div>
  <p class="testGF">testing google fonts</p>
</div>
<hr>
<!--text-align-->
<div class="textAlign">
  <p>hhhhh</p>
  <p>iiiii</p>
  <p>jjjjj</p>
  <p>kkkkk</p>
</div>
<hr>
<!--color-->
<p>
  <span style="color:rgb(255,0,0)">紅</span>
  <span style="color:#00FF00">綠</span>
  <span style="color:rgb(0%,0%,100%)">藍</span>
</p>

CSS

//實作雲端字型
@import url('https://fonts.googleapis.com/css?family=Aref+Ruqaa');

//測試獨特性、實作選擇器、實作字體相關
ul{
  color: green;
  font-size: normal;
}

li{
  color: blue;
}

ul li {
  color: red;
}

.ex1 {
  color: black;
  font-size: 200%;
}

#id2 {
  color: purple;
  font-size: 2em;
}

.ex3 {
  font-weight: bolder;
  color: orange;
  font-size:150%;
}

ul li:nth-child(4) {
  font-style: italic;
}

//實作雲端字型
.testGF {
  font-family: 'Aref Ruqaa', serif;
}

.fontAll p:nth-child(1) {
  font: italic bold 20px 'Aref Ruqaa', serif;
}

.fontAll p:nth-child(2) {
  font: 30px 'New Times Roman', serif;
}

//text-align
.textAlign p:nth-child(1) {
  text-align: left;
}

.textAlign p:nth-child(2) {
  text-align: right;
}

.textAlign p:nth-child(3) {
  text-align: center;
}