白学的小知识[CSS选择器的十二种方法]

1.元素选择器:通过标签名可直接选取到元素。

div{}

p{}

ul{}

...

2.类选择器:通过class类选取到元素，可以选取到多个元素，只要给想要添加这种类名的元素添加上class类，就可以不用反复写相关的样式

.className

记住要添加点号"."

3.id选择器:通过id选取到元素，id是独特的，就跟我们的身份证一样，一人一个，不能重复。

#idName

要以"#"开头

4.通配符选择器:直接以***基本选择器代码总结：开头，通常用于清除默认样式，比如网页的内外边距。

5.并集选择器:并集选择器，意如其名，就是并在一起。
例如：.box,.box1{}

    
    
    


    
并集选择器1
    
并集选择器2

样式:

注：使用并集选择器时别忘了","。

6.交集选择器:交集，相交的元素。

例如：div.box{}

    
    
    


    
交集选择器

样式:

注：使用交集选择器时别记混了，是div+.盒子的class。

7.后代选择器:后代选择器我们需要用空格隔开，选取到全部的后代
例如：div span{}

    
    
    


    

        我是老大
        

            我是老二
            

                我是老三
            
        
    

样式:

 注：使用后代选择器时别记混了，不用+"."。

8.子代选择器:选取到父级元素的子元素，是亲儿子，不包括后代
例如：div>span{}

    
    
    


    

        子代选择器
        子代选择器
        子代选择器
    

样式:

  注：使用子代选择器时别记混了，用的是">"。

9.相邻兄弟选择器:使用+号,选取到的是下一个兄弟。
例如：div+div{ }

    
    
    


    
我是你上一级兄弟
    
我是你哥
    
我是你亲兄弟

样式:

 注：使用兄弟选择器时别记混了，用的是"+",选取的是下一个而不是上面的。

10.全部兄弟选择器:使用~可以选取到全部兄弟,也是从下一个开始。
例如：div~div{ }

    
    
    


    
我是你上一级兄弟
    
我是你哥
    
我是你亲兄弟
    
我也是你亲兄弟

样式:

 注：使用全部兄弟选择器时别记混了，用的是"~",选取的是下一个而不是上面的。

11.使用伪类选择器[常用的三种：:first-child  :last-child  :nth-child(n)]

:first-child选取到第一个元素

    
    
    


    
1
    
2
    
3

样式:

 :last-child选取到最后一个元素

    
    
    


    

        1
        2
        3
    

样式:

:nth-child(n)   选择第n个元素，从1开始
                        even或2n 选中偶数位的元素
                        odd或2n+1 选中奇数位得到元素 

    
    
    


    

        1
        2
        3
        4
    

样式:

 注：使用伪类选择器时，前面+":"

12.属性选择器(介绍4种)

可以通过元素属性选取到属性

 

 --以上皆为个人课后总结，以上有不对的地方，希望大家可以指出，感谢大家！