css 시리즈 튜 토리 얼 1-선택 기 전 해

스 택 엔지니어 개발 매 뉴 얼(저자:난 펑)
demo 학회 css css 시리즈 튜 토리 얼 1-선택 기 풀 기 css 시리즈 튜 토리 얼 2-스타일 조작 풀 기
css 선택 기 풀 기:
css 선택 기 는 기본 선택 기,속성 선택 기,의사 선택 기,의사 요소 선택 기 를 포함한다.
선택 기 는 항상 왼쪽 에서 오른쪽으로 해석 되 며,개인 적 으로()우선 연산 을 추가 하지 마 십시오.
기본 선택 기

h2{                                 /*       */
}
p,h1{                               /*             */
}
div h1,div h2{                      /*           (        )  ，  div     h1，h1 div   ，           h2，       h2   */
    background-color: #2b542c;
}
p>h1{                                /*  >         */
}
p+h1{                                /*  +            ，  h1    */
}
html>body table+ul{                 /*   html          body， body       table， table          ul，        ul    */
}
body *{                              /*  *      ，      ，    body         */
}
p.class1.class2{                    /*  .  class    ，p   ，     ，      ，             */
}
#id1{                                /*  #id   ，         id，     id       */
}

속성 선택 기

p[attribute1][attribute2]{         /*  []      ，             ，              ，class            */
}
a[href="http://www.123.com"]{      /*  =      ，               */
}
div[class~="class1"]{               /*  ~=      ，                */
}
input[title^="title1"]{             /*  ^=                 */
}
input[title$="title1"]{             /*  $=                 */
}
input[title*="title1"]{             /*  *=                */
}
input[title|="title1"]{             /*  |=        title1   title1-     */
}

의사 선택 기

a:link{                             /*  link            */
}
a:visited{                          /*  visited           */
}
input:focus{                        /*  focus            */
}
div:hover{                          /*  hover             */
}
a:active{                           /*  active              */
}
div:first-child{                    /*  first-child       ，       div    */
}
div :first-child{                   /*           ，    div            */
}

의사 요소 선택 기

p:first-letter{                     /* first-letter         */
}
p:first-line{                       /*  first-line        */
}
p:before{                           /*  before         */
    content:"AAAAAAAAAAA";
    color: #2b542c;
}
p:after{                            /*   after          */
    content: "AAAAAAAAAAAA";
    color: #2b542c;
}