css知识点2

高级选择器：后代选择器，子代选择器，并集选择器，交集选择器

1. 后代选择器

   使用空格表示后代选择器。福原色的后代（儿子，孙子，重孙）

2. 子代选择器

   只选择子代，不会包括孙子重孙

   比如div>p>a,子代选择器只会选择元素p，不会选到a

3. 并集选择器

   多个选择器之间使用都好隔开。表示选中的页面中的多个标签。有共同特性的元素。页面布局中会用到。

4. 交集选择器

   使用交集选择器，第一个标签必须是标签选择器，第二个标签必须是类选择器语法：div.active

 

 

属性选择器

根据标签中的属性，选中大年的标签。

1. /*找到for属性的等于username的元素 字体颜色设为红色*/  
2.             /*[for='username']{  
3.                 color: yellow;  
4.             }*/  

 

1. /*包含某元素的标签*/  
2. [for*="vip"]{  
3.    color: #00BFFF;  

伪类选择器

 

伪类选择器一般在a标签中，要遵循爱恨准则LoVe Hate

1. /*没有被访问的a标签的样式*/  
2.         .box ul li.item1 a:link{  
3.                 
4.             color: #666;  
5.         }  
6.         /*访问过后的a标签的样式*/  
7.         .box ul li.item2 a:visited{  
8.                 
9.             color: yellow;  
10.         }  
11.         /*鼠标悬停时a标签的样式*/  
12.         .box ul li.item3 a:hover{  
13.                 
14.             color: green;  
15.         }  
16.         /*鼠标摁住的时候a标签的样式*/  
17.         .box ul li.item4 a:active{  
18.                 
19.             color: yellowgreen;  
20.         }

nth-child()选择器

1. /*选中第一个元素*/  
2.         div ul li:first-child{  
3.             font-size: 20px;  
4.             color: red;  
5.         }  
6.         /*选中最后一个元素*/  
7.         div ul li:last-child{  
8.             font-size: 20px;  
9.             color: yellow;  
10.         }  
11.             
12.         /*选中当前指定的元素  数值从1开始*/  
13.         div ul li:nth-child(3){  
14.             font-size: 30px;  
15.             color: purple;  
16.         }  
17.             
18.         /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/  
19.         div ul li:nth-child(n){  
20.             font-size: 40px;  
21.             color: red;  
22.         }  
23.             
24.         /*偶数*/  
25.         div ul li:nth-child(2n){  
26.             font-size: 50px;  
27.             color: gold;  
28.         }  
29.         /*奇数*/  
30.         div ul li:nth-child(2n-1){  
31.             font-size: 50px;  
32.             color: yellow;  
33.         }  
34.         /*隔几换色  隔行换色  
35.              隔4换色 就是5n+1,隔3换色就是4n+1  
36.             */  
37.             
38.         div ul li:nth-child(5n+1){  
39.             font-size: 50px;  
40.             color: red;  
41.         }