css3之前選擇器

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

2.ID選擇器

3.class類選擇器

4.標簽選擇器（元素選擇器）

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

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

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

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

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

10.偽類選擇器 a:after a:before a:hover

css3新增選擇器

1.E1~E2 關聯選擇器 選擇E1后面的兄弟E2（和我們之前的毗鄰選擇器區別就在這里）

屬性選擇器新增

2. [attr^=" " ] 以“”中內容開頭

3. [attr$=" " ] 以“”中內容結束

4. [attr*=" " ] 包含“”中內容都可以

偽類新增
下面是有of和type是在p當中選p

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

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

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

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

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

下面是沒有of的，是在子元素中選p

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

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

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

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

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

15.p:empty 選擇到p，沒有內容的p

15.p:target 選擇到p，被錨點激活的p

16 p::selection 被用戶選中的p

關于輸入框

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">點我試試1</a>
      <p id="tar1"></p>
      <a href="#tar2">點我試試2</a>
      <p id="tar2"></p>
    </div>
    <div class="box12">
      <span>蘭亭集序，小陽老師！</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">蘋果</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>