CSS3-属性选择器

1.各种不同内科浏览器的css3适配

-webkit-transition: 1s;        /*Chrom、Safari*/

-moz-transition: 1s;            /*Firefox*/

-ms-transition: 1s;            /*IE*/

-o-transition: 1s;            /*Opera*/

transition: 1s;                /*标准*/

2.CSS3属性选择器

 

  2.1书写格式  标签名字[选择器名字]{修改的内容}         

           与CSS2的区别       

               1.多了自定义选择器名字   （css2中只有id 和 class）

               2.不仅可以选择选择器还可以选择选择器=“name” 更加精准  (css2中只能 #name 和 .name) 

1. div[id="box"]{
2. background:red;
3. height:100px;
4. 100px;
5. }
6. li[color]{
7. background:green;
8. }
9. li[color="red"]{
10. background:yellow;
11. }
12. li[app]{
13. background:pink;
14. }
16. <divid="box"class="box"></div>
17. <ul>
18. <licolor='red'>red</li>
19. <licolor='green'>green</li>
20. <licolor='blue'>blue</li>
21. <liapp='yellow'>yellow</li>
22. <licolor='pink'>pink</li>
23. </ul>

    2.2书写格式  E:nth-child(n)  

                 E标签名                n第几个（从1开始的）

                从E标签的父级中去找(正着找)第n个标签，并且这个标签必需是E

               还有一相反的 E:nth-last-child(n)  ,    这个是从父级中倒着找。

 

1. p:nth-child(1){
2. background: red;
3. }
4. p:nth-child(2){
5. background: green;/*这里就不会显示绿色·因为第二个不是p标签*/
6. }
7. span:nth-child(2){
8. background: blue;
9. }
11. <div>
12. <p>red</p>
13. <span>green</span>
14. <p>blue</p>
15. <span>yellow</span>
16. <p>pink</p>
17. </div>

 

2.3书写格式   E:nth-child(odd)   /    E:nth-child(even)

            odd   奇数行

            even  偶数行

1. li:nth-child(odd){
2. background: red;
3. }
4. li:nth-child(even){
5. background: green;
6. }
8. <ul>
9. <li>red</li>
10. <li>green</li>
11. <li>blue</li>
12. <li>yellow</li>
13. <li>pink</li>
14. </ul>

2.4书写格式   E:nth-of-type(n)  

            E标签名            n第几个（从1开始的）

           从E标签的父级中去找(正着找)第n个E标签

          E:nth-last-of-type(n)

     从E标签的父级中倒着去找

1. p:nth-of-type(1){
2. background: red;
3. }
4. p:nth-of-type(2){
5. background: green;
6. }
8. span:nth-of-type(3){
9. background: blue;
10. }
12. <div>
13. <p>red</p>
14. <span>green</span>
15. <p>blue</p>
16. <span>yellow</span>
17. <p>pink</p>
18. <span>green</span>
19. <span>green</span>
20. <span>green</span>
21. </div>

2.5 E:not(s)   排除掉某一个元素  

      E                      标签

      s                      要排除掉的那个标签的class或者id

1. p:not(.green){
2. background: red;
3. }
5. <div>
6. <p>red</p>
7. <pclass="green">green</p>
8. <p>blue</p>
9. </div>

 

2.6E~F            找到E标签后面的所有F标签  

1. ul~p{
2. background: red;
3. }
4. ul~span{
5. background: green;
6. }
8. <div>
9. <ul>
10. <li><span>red</span></li>
11. <li><p>pink</p></li>
12. </ul>
13. <p>green</p>
14. <span>blue</span>
15. <p>black</p>
16. <span>yellow</span>
17. </div>
18. <div>
19. <span>green</span>
20. </div>