选择器

时间:2021-08-11
本文章向大家介绍选择器,主要包括选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1、选择器

1.1、常用的选择器

通配选择器

作用:选中页面中的所有元素

语法:* {}

元素选择器

作用:根据标签名选中指定的元素

语法:标签名{}

id选择器

作用:根据元素的id值选中一个元素

语法:#id属性值{}

类选择器

作用:根据元素的class属性值选中一组元素

语法:.class属性值{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的选择器</title>
    <style>
        /*
            通配选择器
                作用:选中页面中的所有元素
                语法:* {}
          */
          *{
              text-align: center;
          }
          
        /* 
            元素选择器
                作用:根据标签名选中指定的元素
                语法:标签名{}        
        */
        p{
            color: blue;
        }

        /* 
            id选择器
                作用:根据元素的id值选中一个元素
                语法:#id属性值{}
         */
         #pink{
             color: pink;
         }

         /*
            类选择器
                作用:根据元素的class属性值选中一组元素
                语法:.class属性值{}
          */
         .color{
             color: purple;
         }

         .font{
             font-size: 20px;
         }
    </style>
</head>
<body>
    <h3>潦水尽而寒潭清,烟光凝而暮山紫。</h3>
    <h3 id="pink" class="font">落霞与孤鹜齐飞,秋水共长天一色。</h3>
    <!-- 
        可以通过class属性来为元素分组
        可以同时为一个类指定多个class
     -->
    <h3 class="color">爽籁发而清风生,纤歌凝而白云遏。</h3>
    <h3 class="color font">地势极而南溟深,天柱高而北辰远。</h3>

    <p>滕王高阁临江渚,佩玉鸣鸾罢歌舞。</p>
    <p>画栋朝飞南浦云,珠帘暮卷西山雨。</p>
    <p>闲云潭影日悠悠,物换星移几度秋。</p>
    <p>阁中帝子今何在?槛外长江空自流。</p>
</body>
</html>

1.2、复合选择器

交集选择器

作用:选中同时符合多个条件的元素

语法:选择器1选择器2选择器3选择器n{}

并集选择器

作用:同时选择多个选择器对应的元素

语法:选择器1,选择器2,选择器3,选择器n{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        .red{
            color: red;
        }

        /* 将class为red的字体大小设置为30px */
        /*
            交集选择器
                作用:选中同时符合多个条件的元素
                语法:选择器1选择器2选择器3选择器n{} 
                注意点:
                    交集选择器中如果有元素选择器,必须使用元素选择器开头
         */
        div.red{
            font-size: 30px;
        }

        /*
            并集选择器
                作用:同时选择多个选择器对应的元素
                语法:选择器1,选择器2,选择器3,选择器n{} 
         */
        h1,span{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="red">我是div</div>
    <p class="red">我是p元素</p>
    <h1>我是h1标题</h1>
    <span>我是span</span>
</body>
</html>

1.3、关系选择器

子元素选择器

作用:选中指定父元素的指定子元素

语法:父元素>子元素{}

后代元素选择器

作用:选中指定元素内的指定后代元素

语法:祖先元素 后代元素

兄弟元素选择器

作用:选择紧挨着的下一个兄弟元素

语法:前一个元素+后一个元素

兄弟元素选择器

作用:选择下面所有的兄弟

语法:兄元素~弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /* 为class为box的div的子元素span设置一个字体颜色 */
        /*
            子元素选择器
                作用:选中指定父元素的指定子元素
                语法:父元素>子元素{} 
         */
         div > span{
             color:red;
         }

         /* 
            后代元素选择器
                作用:选中指定元素内的指定后代元素
                语法:祖先元素 后代元素
         */
        div span{
            font-size: 30px;
        }

        /*
            兄弟元素选择器
                作用:选择紧挨着的下一个兄弟元素
                语法:前一个元素+后一个元素
         */
         p + span{
             font-style: oblique;
         }

         /*
            兄弟元素选择器
                作用:选择下面所有的兄弟 
                语法:兄元素~弟元素
          */
         p ~ span{
             background-color: blueviolet;
         }
    </style>
</head>
<body>
    <div>
        我是一个div1
        <span>我是div1中的span1元素</span>
        <p>
            我是div1中的p元素
            <span>我是p元素中的span</span>
        </p>
        <span>我是div1中的span2元素</span>
        <span>我是div1中的span3元素</span>
        <span>我是div1中的span4元素</span>
    </div>
</body>
</html>

1.3、属性选择器

  • [属性名] 选择含有指定属性的元素
  • [属性名=属性值] 选择含有指定属性和属性值的元素
  • [属性名^=属性值] 选择属性值以指定值开头的元素
  • [属性名$=属性值] 选择属性值以指定值结尾的元素
  • [属性值*=属性值] 选择属性值中含有某值的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 
            [属性名] 选择含有指定属性的元素
            [属性名=属性值] 选择含有指定属性和属性值的元素
            [属性名^=属性值] 选择属性值以指定值开头的元素
            [属性名$=属性值] 选择属性值以指定值结尾的元素
            [属性值*=属性值] 选择属性值中含有某值的元素
         */
        h3[title]{
            color: blue;
        }

        h3[title=hello]{
            font-size: 30px;
        }

        h3[title^=abc]{
            font-style: oblique;
        }

        h3[title$=abc]{
            background-color: aqua;
        }
        h3[title*=abc]{
            text-align: center;
        }
    </style>
</head>
<body>
    <h3 title="abc">潦水尽而寒潭清,烟光凝而暮山紫。</h3>
    <h3 title="abcdef">落霞与孤鹜齐飞,秋水共长天一色。</h3>
    <h3 title="helloabc">爽籁发而清风生,纤歌凝而白云遏。</h3>
    <h3 title="123abc123">地势极而南溟深,天柱高而北辰远。</h3>
</body>
</html>

1.4、伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*
            伪类(不存在的类,特殊的类)
                - 伪类用来描述一个元素的特殊状态
                - 伪类一般情况下使用:开头
                    :first-child 第一个子元素
                    :last-chile 最后一个子元素
                    :nth-child() 选中第n个子元素
                        特殊值:
                            - n 第n个 n的范围0到正无穷
                            - 2n 或 even 选中偶数位的元素
                            - 2n+1 或 odd 选中奇数位的元素
                    以上这些伪类是根据所有的子元素进行排序
                    :first-of-type
                    :last-of-type
                    :nth-of-type()
                        - 这几个伪类的功能和上述的类似,不同点是它们是在同类型元素中进行排序
                    :not() 否定伪类 将符合条件的元素从选择器中去除
          */

        ul > li:first-child{
            color: red;
        }

        ul > li:last-child{
            color: blue;
        }

        ul >li:nth-child(3){
            color:aqua
        }

        ul > li:not(:nth-child(3)){
            font-style: oblique;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接的伪类选择器</title>
     <style>
         /*
            :link 表示正常的链接
            :visited 用户访问过的超链接 
                由于隐私的原因,:visited伪类只能修改链接的颜色
            :hover 用来表示鼠标移入的状态
            :active 用来表示鼠标点击的状态
          */
          a:link{
              color:aqua;
          }

          a:visited{
              color: red;
          }

          a:hover{
              font-size: 30px;
          }

          a:active{
              color:yellow;
          }
     </style>
</head>
<body>
    <a href="https:www.baidu.com">百度</a><br>
    <a href="https://www.bilibili.com">哔哩哔哩</a><br>
</body>
</html>

1.5、伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /*
            伪元素,表示页面中一些表示特殊的并不存在的元素
                伪元素使用::开头
                ::first-letter 表示第一个字母 
                ::first-line 表示第一行
                ::selection 表示选中的内容
                ::before 表示元素的开始位置
                ::after 表示元素的最后位置
                    ::before 和 ::after 结合content属性来使用
         */
         p::first-letter{
             font-size: 30px;
         }

         p::first-line{
             background-color: aquamarine;
         }

         p::selection{
             background-color: red;
         }

         div::before{
            content:'abc';
            color: red;
         }

         div::after{
            content: 'def';
            color: blue;
         }
    </style>
</head>
<body>
    <div>Hello,how are you?</div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis adipisci rem obcaecati est alias harum aperiam maiores, neque voluptatibus eligendi cupiditate ipsam, at expedita vel sed quam similique! Provident, cupiditate.</p>
</body>
</html>

1.6、选择器的权重

样式冲突: 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时发生样式冲突。

  发生样式冲突时,应用那个样式由选择器的权重(优先级)决定。

选择器的权重

CSS样式 优先级权重
内联样式(行内样式) 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的权重</title>
    <style>
        /*
            比较优先级时,需要将所有的选择器的优先级进行相加计算,最后的优先级越高,则越优先显示(分组选择器单独计算)
            选择器的累加不会超过最大的数量级,类选择器再高也不会超过id选择器
            如果优先级计算后相同,此时优先使用靠下的样式
            可以在某一个样式的后面添加 !important ,则此时该样式会获得最高的优先级,甚至会超过内联样式
         */

        *{
            font-size: 30px;
        }
        div{
            font-size: 50px;
            color: yellow;
        }

        .red{
            color:red
        }

        .div1{
            color:purple;
        }

        #box1{
            color: blue;
        }

        h3{
            color: green;
        }

        .blue{
            color: blue;
        }

        h3.blue{
            color: pink;
        }

        .def{
            background-color: antiquewhite !important;
        }
    </style>
</head>
<body>
    <div class="red">我是div1</div>
    <div id="box1" class="red">我是div2</div>
    <div id="box1" class="red" style="color: aqua;">我是div3</div>
    <div class="red div1">我是div4</div>
    <div>我是一个div5<span>我是div中的span</span></div>
    <h3 class="blue">我是h3标题</h3>
    <h3 class="def" style="background-color: chocolate;">我是一个h3标题</h3>
</body>
</html>

原文地址:https://www.cnblogs.com/starsgrace/p/15129267.html