css中选择器介绍（css中选择器的含义）

选择器：

选择器是用来选择目标元

素的，选择器分基础选择器和复合选择器及伪类选择器。

基础选择器：

    标签名{} /* 1 标签选择器：把某类标签全部选中，如下： */
    p{font-size:36px;}
    
    .类名{} /* 2 类选择器(class选择器)：选中相同类名的元素，.声明，class调用，如下： */
    .box{width:100px;height:50px;}
    

    
 /* 多类名选择器：在class属性中添加多个类名，中间用空格隔开，即可调用多类名来实现多个样式*/
    
    #id名{} /* 3 id选择器：选中id被命名为某名的元素，#定义，id调用，id选择器具有唯一性，相同的id名只能出现在一个标签上 */
    #box{width:100px;height:200px;}
    

    
    *{}/* 4 通配符选择器：选中文档中所有元素，不建议使用，一般使用的情况是非常少的。 */
    *{color:blue;font-size:20px;}

复合选择器：

     div span{/* 1 后代选择器：又称包含选择器，用于选择标签的后代子孙元素及元素组，语法：外层标签写在前面，内层标签写在后面，中间用空格隔开，需要强调的是只要是后代无论多少代都可以选中，它和子代选择器的区别就在这里：不仅仅可以选择紧挨着的下一级元素。 */
      color:blue;
    }
    

      

        

          苹果
        
      
    
    白菜
    
    ul li>a{/* 2子代选择器：选中某标签下紧挨着的某个元素，语法：父级标签 > 子级标签，强调的是：子代选择器选中的是父级紧挨着的子级元素，和后代选择器的区别就在这里。 */
      color:pink;
    }
    

      

        test1
      
      

        

          test2
        
      
    
    
    p.watermelon{/* 3 交集选择器：即又的关系，同时满足条件的会被选中，语法：选择器1选择器2选择器n...,多个选择器连写，中间不用任何字符。 */
      color:red;
    }
    
apple
    
orange
    
watermelon
    苹果
    橙子
    西瓜
    
    p,
    span,
    .pear{/* 4 并集选择器：同时选择多个单独或一组标签，语法：多个选择器中间用逗号连接，可以快速选择需要给相同样式的所有标签 */
      color:red;
      font-size:40px;
    }
    
苹果
    
荔枝
    大米
    香蕉
    地瓜
    
梨
    
    .banana+li {/* 5 相邻元素选择器：选择紧挨着某元素下的一个兄弟元素，语法：选择器1 + 标签，注意兄弟元素选择器*/
      color: red;
    }
    

      
苹果
      
香蕉
      
荔枝
    
    
    .banana~li {/* 6 兄弟元素选择器：选择挨着某元素下的所有兄弟元素，语法：选择器1 ~ 标签，注意相邻元素选择器*/
      color: red;
    }
    

      
苹果
      
香蕉
      
荔枝
        
菠萝蜜
        
桃子
    

伪类选择器：

伪类选择器是以冒号：开始的，如下面链接伪类选择器（需要和伪元素区分）：

    a:link{color:black;}/* 设置未访问的链接样式 */
    a:visited{color:gray;}/* 设置已访问的链接样式 */
    a:hover{color:yellow;}/* 设置鼠标经过链接的样式 */
    a:active{color:red;}/* 设置鼠标点击时链接的样式 */
    /* 需要注意：这四个链接的伪类选择器是按照上面的顺序书写的，必须严格遵循。 */

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。

笔者：苦海123

其它问题可通过以下方式联系本人咨询：

QQ：810665436

微信：ConstancyMan