css中选择器介绍

选择器：

选择器是用来选择目标元

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

基础选择器：

    标签名{} /* 1 标签选择器：把某类标签全部选中，如下： */
    p{font-size:36px;}
    
    .类名{} /* 2 类选择器(class选择器)：选中相同类名的元素，.声明，class调用，如下： */
    .box{width:100px;height:50px;}
    <div class="box"></div>
    <div class="box stylebox"></div> /* 多类名选择器：在class属性中添加多个类名，中间用空格隔开，即可调用多类名来实现多个样式*/
    
    #id名{} /* 3 id选择器：选中id被命名为某名的元素，#定义，id调用，id选择器具有唯一性，相同的id名只能出现在一个标签上 */
    #box{width:100px;height:200px;}
    <div id="box"></div>
    
    *{}/* 4 通配符选择器：选中文档中所有元素，不建议使用，一般使用的情况是非常少的。 */
    *{color:blue;font-size:20px;}

复合选择器：

     div span{/* 1 后代选择器：又称包含选择器，用于选择标签的后代子孙元素及元素组，语法：外层标签写在前面，内层标签写在后面，中间用空格隔开，需要强调的是只要是后代无论多少代都可以选中，它和子代选择器的区别就在这里：不仅仅可以选择紧挨着的下一级元素。 */
      color:blue;
    }
    <div>
      <ul>
        <li>
          <span>苹果</span><!-- 被选中项-->
        </li>
      </ul>
    </div>
    <span>白菜</span>
    
    ul li>a{/* 2子代选择器：选中某标签下紧挨着的某个元素，语法：父级标签 > 子级标签，强调的是：子代选择器选中的是父级紧挨着的子级元素，和后代选择器的区别就在这里。 */
      color:pink;
    }
    <ul>
      <li>
        <a href="#">test1</a><!-- 被选中项-->
      </li>
      <li>
        <div>
          <a href="#">test2</a>
        </div>
      </li>
    </ul>
    
    p.watermelon{/* 3 交集选择器：即又的关系，同时满足条件的会被选中，语法：选择器1选择器2选择器n...,多个选择器连写，中间不用任何字符。 */
      color:red;
    }
    <p>apple</p>
    <p>orange</p>
    <p class="watermelon">watermelon</p><!-- 被选中项-->
    <span>苹果</span>
    <span>橙子</span>
    <span class="watermelon">西瓜</span>
    
    p,
    span,
    .pear{/* 4 并集选择器：同时选择多个单独或一组标签，语法：多个选择器中间用逗号连接，可以快速选择需要给相同样式的所有标签 */
      color:red;
      font-size:40px;
    }
    <p>苹果</p>
    <p>荔枝</p>
    <del>大米</del>
    <span>香蕉</span>
    <ins>地瓜</ins>
    <div class="pear">梨</div>
    
    .banana+li {/* 5 相邻元素选择器：选择紧挨着某元素下的一个兄弟元素，语法：选择器1 + 标签，注意兄弟元素选择器*/
      color: red;
    }
    <ul>
      <li>苹果</li>
      <li class="banana">香蕉</li>
      <li>荔枝</li>
    </ul>
    
    .banana~li {/* 6 兄弟元素选择器：选择挨着某元素下的所有兄弟元素，语法：选择器1 ~ 标签，注意相邻元素选择器*/
      color: red;
    }
    <ul>
      <li>苹果</li>
      <li class="banana">香蕉</li>
      <li>荔枝</li>
        <li>菠萝蜜</li>
        <li>桃子</li>
    </ul>

伪类选择器：

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

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

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

笔者：苦海123

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

QQ：810665436

微信：ConstancyMan