常用选择器以及子元素和后代元素选择器

常用选择器

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>选择器</title>
        <style type="text/css">
        /*
            设置颜色为红
            元素选择器
            
           p{
                          color: #FF0000;
           }
            
            id选择器
                  语法 #id属性值
           
            #p1{
             font-size: 30px;
           }      
         
            类选择器
                -通过元素的class属性值选中一组元素
                （可同时为一个元素设置多个class属性值，多个值之间空格隔开）
                
            .p2{
                font-size: 20px;
                color: gray;
            }
            .hello{
                font-size: 35px;
            }   
            
            选择器分组(并集选择器)
               - 通过选择器分组可以同时选中多个选择器对应的元素
               - 语法：选择器1，选择器2，选择器N{}
              
              #p1,.p2,h1{
                  background-color: yellow;
              }
            
            */
           /*
            通配选择器
              - 可以用来选中页面中所有元素
              语法：*{}
              *{
                  color: red;
              }
            */
           
            /*
             拥有class p3 的span元素设置背景颜色黄
             
             
             复合选择器（交集选择器）
                - 可以选中同时满足多个选择器的元素
                语法：选择器1选择器2选择器N{}
            */
             span.p3{
                 background-color: yellow;
             }
            
            
        </style>
    </head>
    <body>
        <h1>哈哈</h1>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
        <p id="p1">锄禾日当午</p>
        <p class="p2 hello">锄禾日当午</p>
        <p class="p2">锄禾日当午</p>
        <p class="p2">锄禾日当午</p>
        <p class="p3">锄禾日当午</p>
        <p class="p3">锄禾日当午</p>
        <span class="p3">锄禾日当午</span>
    </body>
</html>

 

常用：

          元素选择器

          id选择器， 

          类选择器
                -通过元素的class属性值选中一组元素
               （  可同时为一个元素设置多个class属性值，多个值之间空格隔开

  　　 选择器分组(并集选择器)
　　　 　　- 通过选择器分组可以同时选中多个选择器对应的元素
　　　　    - 语法：选择器1，选择器2，选择器N{}

　　　通配选择器
　　　　　- 可以用来选中页面中所有元素
　　　　　　语法：*{}

　　　复合选择器（交集选择器）
　　　　　- 可以选中同时满足多个选择器的元素
　　　　　　语法：选择器1选择器2选择器N{}

 

子元素以及后代元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子元素以及后代元素</title>
        <style type="text/css">
            /*
             *为div中span设置颜色黄色
             *
             *后代元素选择器
                 - 选中指定元素的指定后代元素
             语法 ：
                 - 祖先元素 后代元素{}
             */
            #d1 span{
                background-color: yellow;
            }
            
            /*
              选中id为d1的div中p元素中的span元素
            */
            #d1 p span{
                font-size: 50px;
            }
            /*
            div子元素span设置背景为黄
            
            子元素选择器
               - 选中指定父元素的指定子元素
            语法：
               - 父元素 > 子元素
            */
            div > span{
                background-color: #FFFF00;
            }
        </style>
    </head>
    <body>
        <!-- 
         元素之间关系
             - 父元素：直接包含子元素
             - 子元素：直接被父元素包含
             - 祖先元素：直接或间接包含后代元素（包括父元素）
             - 后代元素：直接或间接被祖先元素包含（包括子元素）
             - 兄弟元素：拥有相同父元素的元素
         
         
         -->
        
        
        
        <div id="d1">
            <p><span>p中的span标签</span></p>
            <span>div中的span标签</span>

        </div>
            <span>div中的span标签</span>
    </body>
</html>

要点：搞清元素之间的关系

 

posted @ 2021-06-29 16:09  2237774566  阅读(217)  评论(0)    收藏  举报