二、css3新增内容

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>