0
点赞
收藏
分享

微信扫一扫

选择器进阶

三分梦_0bc3 2022-04-16 阅读 13
前端
  • 能够使用复合选择器在HTML中选择元素
  •  能够使用Emmet语法提高编码速度
  •  能够使用hover伪类选择器设置鼠标悬停的状态
  •  能够使用结构伪类选择器找到偶数、奇数个li标签选择器的进阶

选择器的进阶

复合选选择器:

 

作用:在选择器1所在的后代中,找到选择器2,并且设计它的样式

注意:后代包括:儿子 孙子 重孙子...... 选择器与选择器之间通过空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>  
    <style>
    /* h后代选择器 */
  /*后代选择器: 
  1. 选择器语法:选择器1 选择器2 {css} 
  2.结果:在选择器1所在的后代中,找到选择器2,并且设计它的样式 
  3.注意:后代包括:儿子 孙子 重孙子......
         选择器与选择器之间通过空格隔开   */
.father p { 
          color: red;
  } 

    </style>    
</head>
<body>
    <div class="father">
        <p>小姐姐</p>
        <div>
            <p>小可爱</p>
        </div>
    </div>
        <p>小哥哥</p>
</body>
</html>

 

举报

相关推荐

CSS进阶--选择器进阶

选择器之类选择器

0 条评论