前端学习之旅2--CSS中常用的一些选择器

本文链接：https://blog.csdn.net/m0_52774518/article/details/121452300

CSS–常用选择器
1.常用选择器简介

<!DOCTYPE html>
<html lang="en">
    <head>
        <mata charset="UTF-8">
            <style>
               /*
               将所有的段落设置为红色（字体）

               元素选择器
                  作用：根据标签名来选中指定的元素
                  语法：标签名（）
                  例子：p{} h1{} div{}
               

                  id选择器
                    作用：根据元素的id属性值选中一个元素
                    语法：#id属性值{}
                    例子：#box{} #red{}
               
               */
               
                #red{
                    color: red;
                }
                /*
                将秋水和长天设置成蓝色
                  类选择器：
                       作用：根据元素的class属性值选中一组元素
                       语法：.class属性值

                */
                .blue{
                    color: blue;
                }
                .abc{
                    font-size: 20px;
                }
          
            </style>
    </head>
<body>
    <h1>Title</h1>
    <p>少小离家老大回</p>
    <p id="red"> 乡音无改病毛遂</p>
    <p id="red">儿童相见bbb</p>
    <p>ffghjhjh</p>
    <!--
        class是一个标签的属性，它和id类似，不同的是class可以重复使用
                 可以通过class属性来为元素分组
    -->
    <p class="blue abc">hygg</p>
    <p class="blue">少fkrehi</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <mata charset="UTF-8">
            <style>
                /*
                将class为red的元素设置为红色（字体）
                交集选择器
                   作用：选中同时符合多个条件的元素
                   语法：选择器1和选择器2选择器3选择器n{}
                   注意点：
                   交集选择器中如果有元素选择器，必须使用元素选择器开头
                */
                .red{
                    color: red;
                }
                div.red{
                    font-size: 30px;
                }
                .a.b.c{
                    color:blue;
                }
                /*
                选择器分组（并集选择器）
                作用：选择器1，选择器2，选择器3，选择器n{}
                b1,p1,h1,span..{}
                */
                h1,
                span{
                    color:red;
                }
            </style>
    </head>
<body>
    <div class="red">我是div</div>
    <p class="red">我是p元素</p>
    <div class="red2 a b c">我是div2</div>
    <h1>标题</h1>
    <span>哈哈</span>
</body>
</html>

在这里插入图片描述
3.关系选择器

<!DOCTYPE html>
<html lang="en">
    <head>
        <mata charset="UTF-8">
            <style>
            /*
            为div的子元素span设置一个字体颜色红色
             （为div直接包含的span设置一个字体颜色）

             子元素选择器
                作用：选中指定父元素的指定子元素
                语法：父元素>子元素
            
            */
            /*
            
            后代元素选择器：
                      作用：选中指定元素内的指定后代元素
                      语法：祖先 后代
            */
            /*
            选择下一个兄弟：
            语法：前一个+下一个
            */
            p+span{
                color: blue;
            }
            P~span{
                color: red;
            }
            /* div span{
                color:red;
            }
         div.box>span{
                color:orange;
            } 
            div>p>span{
                color:red;
            } */
            </style>
    </head>
<body>
    <!--
        父元素
             -直接包含子元素的元素叫父元素
             子元素
                -直接被父元素包含的元素是子元素
             祖先元素
                -直接或间接包含后代的元素的元素叫做祖先元素
                -一个元素的父元素也是它的祖先元素
             后代元素
                -直接或间接被祖先元素包含的元素叫做后代元素
                -子元素也叫后代元素
             兄弟元素
                 -拥有相同的父元素的元素是兄弟元素
    -->
    <div class="box">
        我是一个div
        <p>
            我是div中的p
            <span>我是p元素中的span</span>
        </p>
        <span>我是div中的span</span>
    </div>
    <span>我是div外的span</span>
</body>
</html>

4.属性选择器

<!DOCTYPE html>
<html lang="en">
    <head>
        <mata charset="UTF-8">
            <style>
                /*
                【属性名】选择含有指定属性的元素
                [属性名=属性值]选择含有指定属性和属性值的元素
                [属性名^=属性值]选择属性值以指定值开头的元素
                [属性值￥=属性值]选择属性值以指定值结尾的元素
                [属性值*=属性值]选择属性值中含有某值的元素的元素
                
                */
                /*
                p[title]{}
                */
            p[title^=abc]{
                color:orange;
            }
            </style>
    </head>
<body>
    <h1>Title</h1>
    <p title="abc">少小离家老大回</p>
    <p title="abcdef">乡音无改病毛遂</p>
    <p title="hello">儿童相见bbb</p>
    <p>ffghjhjh</p>
    <p>笑问客从何处来</p>
    <!--
        class是一个标签的属性，它和id类似，不同的是class可以重复使用
                 可以通过class属性来为元素分组
    -->
    <p >hygg</p>
    <p >少fkrehi</p>
</body>
</html>