css3之前選擇器

1. 通配符選擇器 *選擇器

2.ID選擇器

3.class類(lèi)選擇器

4.標(biāo)簽選擇器（元素選擇器）

5.組合選擇器 #box1,#box2{}(同時(shí)選擇到box1和box2)

6.后代選擇器 ul li(選擇到ul下面的li)

7.子代選擇器 ul>li(選擇到ul的親兒子li)

8.毗鄰選擇器 div+p（選擇到div緊鄰的兄弟p）

9.屬性選擇器 div[class="box1"]

10.偽類(lèi)選擇器 a:after a:before a:hover

css3新增選擇器

1.E1~E2 關(guān)聯(lián)選擇器 選擇E1后面的兄弟E2（和我們之前的毗鄰選擇器區(qū)別就在這里）

屬性選擇器新增

2. [attr^=" " ] 以“”中內(nèi)容開(kāi)頭

3. [attr$=" " ] 以“”中內(nèi)容結(jié)束

4. [attr*=" " ] 包含“”中內(nèi)容都可以

偽類(lèi)新增
下面是有of和type是在p當(dāng)中選p

5. p:first-of-type 選擇到p，p必須為他們各自父級(jí)所有子元素為p的第一個(gè)p

6. p:last-of-type 選擇到p，p必須為他們各自父級(jí)所有子元素為p的最后一個(gè)p

7. p:only-of-type 選擇到p，p必須為他們各自父級(jí)所有子元素為p的唯一一個(gè)p

8. p:nth-of-type(n) 選擇到p, p必須為父級(jí)所有子元素為p的第n個(gè)p

9. p:nth-last-of-type(n) 選擇到p, p必須為父級(jí)所有子元素為p的d倒數(shù)第n個(gè)p

下面是沒(méi)有of的，是在子元素中選p

10.p:only-child 選擇p,p必須為他們各自父級(jí)的唯一一個(gè)子元素

11.p:last-child 選擇p,p必須為他們各自父級(jí)的最后一個(gè)子元素

12.p:nth-child(n) 選擇p,p必須為他們各自父級(jí)的第n個(gè)子元素

13.p:nth-last-child(n) 選擇p,p必須為他們各自父級(jí)的倒數(shù)第n個(gè)子元素

14.p:not(.c1) 選擇到p，除了類(lèi)名叫做c1的p

15.p:empty 選擇到p，沒(méi)有內(nèi)容的p

15.p:target 選擇到p，被錨點(diǎn)激活的p

16 p::selection 被用戶(hù)選中的p

關(guān)于輸入框

17 input:disabled 選中不可用的input輸入框

18 input:enabled 選中可用的input輸入框

19 input:checked 選中被選中的input輸入框

具體使用代碼：

<div class="main">
    <div class="box1">
      <p></p>
      <p></p>
      <p></p>
      <div></div>
      <p></p>
    </div>
    <div class="box2">
      <p class="testt"></p>
      <p class="ttest"></p>
      <p class="ttestt"></p>
    </div>
    <div class="box3">
      <div></div>
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </div>
    <div class="box4">
      <div></div>
      <p></p>
      <!--<p></p>-->
      <span></span>
      <a href=""></a>
    </div>
    <div class="box5">
      <div></div>
      <p>1</p>
      <p>2</p>
      <div></div>
      <p>3</p>
      <p>4</p>

      <a href=""></a>
      <span></span>
    </div>
    <div class="box6">
      <!--<div></div>-->
      <p></p>
    </div>
    <div class="box7">
      <div></div>
      <p>1</p>
      <p>2</p>
      <!--<div></div>-->
    </div>
    <div class="box8">
      <div></div>
      <p>1</p>
      <p>2</p>
      <div></div>
    </div>
    <div class="box9">
      <p class="c1">1</p>
      <p id="c2">2</p>
      <p class="c3">3</p>
    </div>
    <div class="box10">
      <p>1</p>
      <p></p>
      <p></p>
    </div>
    <div class="box11">
      <a href="#tar1">點(diǎn)我試試1</a>
      <p id="tar1"></p>
      <a href="#tar2">點(diǎn)我試試2</a>
      <p id="tar2"></p>
    </div>
    <div class="box12">
      <span>蘭亭集序，小陽(yáng)老師！</span>
    </div>
    <div class="box13">
      迷途的羔羊： <input type="text" disabled> <br>
      大白：<input type="text">
    </div>
    <div class="box14">
      <input type="radio" name="fruit" id="apple"><label for="apple">蘋(píng)果</label>
      <input type="radio" name="fruit" id="banana"><label for="banana">香蕉</label>
      <input type="radio" name="fruit" id="pear"><label for="pear">梨子</label>
      <input type="radio" name="fruit" id="orange"><label for="orange">橘子</label>
    </div>
    
  </div>