CSS中的选择器

一、基本选择器

基本选择器有四种：标签选择器、ID选择器、类选择器、通配符选择器。

1.标签选择器：根据标签的名称设置对应的样式；

2.ID选择器：通过获取标签里面的ID属性去设置对应的样式，设置的时候通过 “#”+id的值；

3.类选择器：通过获取标签里面的class属性去设置对应的样式，设置的时候.+class的属性值；

4.通配符选择器：能够给每一个标签加上对应的样式,通过*设置对应的样式。

优先级：ID选择器>类选择器>标签选择器>通配符选择器。

    
    
    
    
    


    
标签选择器效果
    
ID选择器效果
    
这是类选择器效果
    

    

        
这是列表1
        
这是列表1
        
这是列表1
        
这是列表1
        
这是列表1
        
这是列表1
    

二、包含选择器

包含选择器有三种：子代选择器、后代选择器、分组选择器。

子代选择器：获取的是某个标签的第一级子标签；

后代选择器：获取的是某个标签的所有子标签；

分组选择器：也叫做逗号选择器，也可以设定多个选择器，用逗号进行分割。

    
    
    
    
    


    
这是一个标题
    
ID选择器效果
    
这是类选择器效果
    

        

            
这是列表1
            
这是列表2
            
这是列表3
            
这是列表4
            
这是列表5
            
这是列表6
            
这是列表7
        
        
这是列表8
        
这是列表9
        
这是列表10
    

三、属性选择器

属性选择器写法：标签名[属性] { 样式 }

只要有 type 属性的 input 标签样式都会发生变化，也可以给属性加上属性值来限制条件 。

input[type="text"] ---- 只有 type 属性的属性值为 text 的 input 标签样式才会生效。

*=  代表只要满足条件的都生效，只要 type 这个属性中包含=后面的值就会生效。

^=  代表属性中的值以xxx开始，只要 type 这个属性中包含=后面的值就会生效。

$=  代表属性里面包含以xxx结尾，只要 type 这个属性中包含=后面的值就会生效。

    
    
    
    
    


    
这是一个div容器
    
这是第二个div
    
    
    
    

    
我喜欢吃好吃的
    
这是一个段落

四、伪类选择器

伪类选择器：同一个标签在不同的状态下，有不同的样式

伪类:同一个标签，在不同的状态下，有不同的样式

伪类通过冒号表示

最早的时候主要是用来与渲染a标签不同的状态下不同的样式

1.超链接点击之前--------------------------:link

2.超链接被访问之后-----------------------:visited

3.鼠标放在超链接上的时候(悬停)------:hover

4.超链接激活的时候(鼠标点击便签但是不松手的时候):active

注意：对于a标签的四种状态顺序是一定的（a：link a：visited a：hover a：active）

    
    
    
    
    


    点击
    
这是一个div标签

五、伪元素选择器

伪元素选择器

：before————css2

：after————css2

：：before————css3

：：after————css3

注意：使用before和after的时候一定给要写上content属性。

    
    
    
    
    


    
这是一个段落