HTML5 移動Web界面樣式 CSS3 - 5

  %h2= "第六章 移動Web界面樣式 CSS3"

  %section

    %p= "選擇器"

    %p

      %article

        %lable= "屬性選擇器"

        %lable.zrticle= "完全 [class=article]"

        %lable.ddzrticless= "包含 [class*=article]"

        %lable.abbddd= "首字母 [class=a]"

        %lable.aaaaae= "為字母 [class=e]"

        %lable= "僞類選擇器"

        %div.before= "%div.before content:文字"

        %lable.after= "%lable.after content:文字"

        %lable.first-child= "%lable.first-child content:文字"

        %lable.last-child= "%lable.last-child content:文字"

        %lable.nth-child= "%lable.nth-child content:文字"

        %lable.nth-last-child= "%lable.nth-last-child content:文字"

    %p= "陰影"

      %article.shadow

        %lable.box-shadow= "這是陰影效果 box-shadow: 3px 4px 2px #000;"

        %lable.text-shadow= "這是文本陰影效果 text-shadow: 3px 4px 2px #000;"

    %p= "背景"

      %article.background

        %lable.background-size= "background-size 背景大小"

        %lable.background-clip= "background-clip 背景裁剪區域"

        %lable.background-origin= "background-origin 參考起始位置"

        %lable.background= "background "

    %p= "圓角"

      %article.radius-art

        %lable.lab-radius= "radius 圓角"

    %p= "Media Queries 移動裝置樣式"

%link{rel= "stylesheet", :media => "screen and(max-width:600px)" :href = > "small.css"}

----------------------------------------------------------------------------------------------------------------

.page-frontpage-index{

  background-color: #fff;

  [class=zrticle]{

    background-color: red;

  }

  [class*=zrticle]{

    background-color: #abc;

  [class^=a]{

    background-color: #def;

  [class$=e]{

    background-color: #543;

  div.before{

    content: 'before 添加';

  .shadow{

    .box-shadow{

      box-shadow: 3px 4px 2px #000;

      -webkit-box-shadow:3px 4px 2px #000;

      -moz-box-shadow:3px 4px 2px #000;

      padding: 5px 4px;

    }

    .text-shadow{

      text-shadow: 3px 4px 2px #000;

      color: #666;

      font-size: 16px;

  .background{

    height: 80px;

    .background-size{

      background:url(auth/auth-bg.jpg) no-repeat 0px 0px ;

      background-size: 50px 40px;

      padding: 10px;

    .background-clip{

      background-clip: content-box;  /*| padding-box | border-box | no-clip;*/

    .background-origin{

      background-origin: content;

    .background{

  .radius-art{

    .lab-radius{

      border-radius: 10px 5px;

      margin: 40px;