css几种常见的选择器

选择器是css很重要的一个内容，我在学习css的同时，总结了一下常见的几种选择器 （本人目前也是web前端学习者，写下这篇博客希望能够加强自己对选择器的理解，同时也希望能够帮助大家，能够共同进步，如果有不足之处也希望各位大佬指出）

1. 通用选择器：

格式： * {
}

通用选择器是对本页面所有元素进行操作的选择器

 /*通用选择器*/
    *{  
        /*背景色为蓝色*/
        background-color:blue;
        /*外边距为0*/
        margin: 0;
        /*内边距为0*/
        padding: 0;
    }

2. id选择器：

格式： #元素id{
}

id选择器是一种基础的选择器(但是一般不会使用，因为局限性比较高)，是通过元素的id来对元素进行操作，元素的id需要自己设置，并且每个元素的id都是唯一值：

  
  
'div1'>
  
'div2'>

结果如图：

3. 类选择器：

格式： . 类名{ }

类选择器可以说是最常用的一类选择器，是根据元素的class来对元素进行操作，可以对多个具有相同的class的元素进行操作：

  
  
"div1">
  
"div1">

测试结果如图：

4. 元素选择器：

格式：元素名{

}

如果想直接对html元素定义，可以直接使用元素选择器：

结果如图：

5 并集选择器

格式： 选择器1 ，选择器2 （选择器可以为任何类型的选择器）{
}

并集选择器可以同时对多个选择器进行操作：

  
"div1">
  
"divx">
  
"divy">

测试结果：

6. 后代选择器：

格式：选择器1 选择器2{

}

用于指定元素素下的后辈元素，注意：选择器和选择器之间有一个空格。

"container">
    

        

            aaa
           

              
bbb
           
        
        
ddd
        
eee
        
fff
    

如上代码，对类选择器container后辈中的li选择器进行操作，后代选择器也是一个十分常用的选择器
测试结果：

7. 子类选择器

格式：
选择器1 >选择器2{

}

用于选择指定元素的第一代子元素，区别于后代选择器，子类选择器只会对第一代后代起作用，后代选择器是作用于所有的后代：

"container">
    

        

            aaa
           

              
bbb
           
        
        
ddd
        
eee
        
fff
    

测试结果如下：

• 链接伪类选择器
  连接伪类选择器适用于超链接的伪类选择器，也可以理解为选择原元素a的状态

a的状态有：

• link：未被访问（初始化的状态）
• visited：被访问过的状态
• tive：正在访问的状态（即选定的状态）
• hover：鼠标悬浮的状态（即鼠标移动到连接上）

举个简单的例子：

"#">点我

由于测试结果不好截图，就期待有兴趣的小伙伴们自己测试一下啦！

目前本人在学习过程中主要接触到以上几种选择器，但是css选择器远不止如此，期待在未来会写一篇完整版的关于选择器的理解的博客。