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]"

      %article
        %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= "阴影"
    %p
      %article.shadow
        %lable.box-shadow= "这是阴影效果 box-shadow: 3px 4px 2px #000;"
        %lable.text-shadow= "这是文本阴影效果 text-shadow: 3px 4px 2px #000;"


    %p= "背景"
    %p
      %article.background
        %lable.background-size= "background-size 背景大小"
        %lable.background-clip= "background-clip 背景裁剪区域"
        %lable.background-origin= "background-origin 参考起始位置"
        %lable.background= "background "

    %p= "圆角"
    %p
      %article.radius-art
        %lable.lab-radius= "radius 圆角"


    %p= "Media Queries 移动设备样式"
    %p
      %article.radius-art
        %lable.lab-radius= "radius 圆角"

%link{rel= "stylesheet", :media => "screen and(max-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:url(auth/auth-bg.jpg) no-repeat 0px 0px ;
      background-clip: content-box;  /*| padding-box | border-box | no-clip;*/
      padding: 10px;
    }
    .background-origin{
      background:url(auth/auth-bg.jpg) no-repeat 0px 0px ;
      background-origin: content;
      padding: 10px;
    }
    .background{
      background:url(auth/auth-bg.jpg) no-repeat 0px 0px ;
    }
  }
  .radius-art{
    .lab-radius{
      background:url(auth/auth-bg.jpg) no-repeat 0px 0px ;
      border-radius: 10px 5px;
      margin: 40px;
    }
  }

  .Media{
    @media (max- 600px) {
      .facet_sidebar {
        display: none;
      }
  }