11月29日：选择器的进一步学习-CSDN博客

本文链接：https://blog.csdn.net/qq_46111433/article/details/127971337

一、伪类选择器

<!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>
        /* 需求一：将ul里的第一个li自动一直设置为红色 */

        /*一、伪类（不存在的类，特殊的类） 
        定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一个
        例如：第一名，倒数第一名，鼠标悬浮，鼠标点击等

        常见的伪类选择器
            语法使用‘:’开头
            :first-child  第一个元素
            :last-child  最后一个元素
            ：nth-child  选中第几个元素
                特殊值：
                2n或even  偶数
                2n+或odd  奇数

        -以上这些伪类都是根据所有的子元素进行排序

        ：first-of-type 第一个元素
        :last-of-type  最后一个元素
        :nth-of-type()  选中第几个元素
        
        -功能跟上面相似，不同的是，这是在同类型的子元素中去选择

        */
        /*二、not()否定伪类
        -将符合条件的元素从选择器中去除  */
        /* 需求二：给所有诗句加背景色，除了l1 */
        li:nth-child(2){
            color: blue;
        }
        li:first-child{
            color: red;
        }
        li:not(.l1){
            background-color: green;
        }
        li{
            /* 去除li的项目符号 */
            list-style: none;
        }
        a{
            /* 去除a标签的下划线 */
            text-decoration: none;
        }
        h1{
          /* 增加下划线 */
          text-decoration: underline;
        }


    </style>
</head>
<body>
    <a href="">超链接</a>
    h1>沁园春·雪</h1>
    <h3>毛泽东</h3>
    <ul>
      <!-- <span>测试</span> -->
      <li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
      <li>北国风光，千里冰封，万里雪飘。</li>
      <li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
      <li class="l1">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
      <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
      <li>须晴日，看红装素裹，分外妖娆。</li>
      <li>江山如此多娇，引无数英雄竞折腰。</li>
</body>
</html>

二、a元素的伪类

<!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>
        /* 需求一：给未访问过的超链接加红色字体 */
        /* 1.link  没有访问过的状态 */
        a:link {
            color: orange;
        }

        /* 需求二：给访问过的超链接加绿色字体 */
        /* 2.visited 访问过的状态 */
        a:visited {
            color: green;
            /* 以下样式不生效 */
            font-size: 50px;
        }

        /* 
        注意：
            1.:link和:visited 是a标签独有的伪类
            2.由于隐私问题，:link和:visited只能设置字体颜色
         */
        /* 需求三：鼠标移入，链接字体变大到30px */
        /* 3.:hover  鼠标移入的状态 */
        a:hover {
            font-size: 30px;
            /* color: red;
            background-color: pink; */
        }

        h1:hover {
            color: green;
            background-color: hotpink;
        }

        /* 需求四：鼠标点击后，增加背景色pink */
        /* 4.:active  鼠标点击后的状态 */
        a:active {
            background-color: pink;
        }

        div:active {
            color: red;
        }

        /* 
      注意：
        :hover和:active  针对所有的元素
      */
    </style>
</head>

<body>
    <a href="">空链接</a>
    <a href="https://baidu.com">百度</a>
    <a href="https://jd.com">京东</a>
</body>

</html>

三、伪元素选择器

<!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>
        /* 需求一：让文章的首字母一直为字体24px */
        /* 1.::first-letter  第一个字母 */
        /* 需求二：让文章的第一行添加背景色黄色 */
        /* 2. ::first-line 第一行*/
        /* 需求三：让选中的内容字体为红色 */
        /* 3.::selection  选中的内容 */
        /* 需求四：在元素开始的位置前+'abc' */
        /* 4.::before  在元素的最前面
                必须配合content样式名使用

                ::after  在元素的最前面
                必须配合content样式名使用 */
        p::first-letter{
            font-size: 34px;
        }
        p::first-line{
            background-color: yellow;
        }
        p::selection{
            color: red;
        }
        p::before{
            content: 'abc';
        }
        p::after{
            content: '你也好啊';
        }
    </style>
</head>
<body>
    <p>

    </p>
</body>
</html>

四、继承

<!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>
        /* 共同的祖先元素，设置统一的字体大小 */
        /* 样式的继承（继承祖先的资产）
                定义：给父元素或者祖先元素设置有关样式，它会继承到子元素或后代元素上，
                优势：一般情况下，样式的继承是对我们开发是有利，不需要额外调整
                注意：不是所有的样式都能继承，一般情况布局上样式
                 */
            /* 共同的祖先元素，设置统一的字体大小、字体颜色、行高、字体等 */
            body{
         font-size: 12px;
         color: #3c3c3c;
       }
        p{
          color: red;
          font-size: 30px;
        }
    </style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素的span元素
          <em>我是span里面的em元素，我也可以继承</em>
        </span>
      </p>
      <span>我是p元素外的span元素，我不会继承</span>
</body>
</html>

五、选择器的权重

<!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>
    <!-- 经典面试题：你常用的选择器有哪些？能否说一下他们之间的权重问题？ -->
    <!-- 
        样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果，是看选择器的权重，谁的权重高，就有效果
            选择器的权重
                内联样式                                    1000
                id选择器                                    100
                class选择器/属性选择器（谁在下面谁显示）       10
                元素选择器                                   1
                通配选择器                                   0
                继承样式                                   没有权重
            注意：
                1.如果选择器的权重一样，那么谁靠下，就谁生效
                2.要让所有选择器的权重相加，最终谁大听谁的
                3.所有的选择器的权重相加，最高也不会超过上一等级的权重，如再多的类选择器权重相加，也不会超过id选择器权重
                4.在并集选择器（群组选择器）当中，选择器权重是各算各的，最终谁大听谁的
                5.!important  是最高的权重  但慎用
                    一般情况下，可以测试使用，测试是否是选择器权重的问题
     -->
     <!-- 如果样式设置不成功：
                1.你没选中
                2.选择器权重问题    !important进行测试
             -->
    <style>
        /* body{
        background-color: lawngreen;
      } */
      /* *{
        background-color: rgb(82, 82, 228);
      } */
      /* div,.dd{
        background-color: green;
      }*/
      /* .dd.d1.d1.d3{
        background-color: red;
      } */

      /* #dv{
        background-color: pink;
      }  */
      /* [id]{
        background-color: hotpink;
      } */
      .dd>span{
        color: green;
      }
      #dv span{
        color: red;
      }
     
    </style>

</head>
<body>
    <!--style="background-color:blue;"  -->
    <div id="dv" class="dd d1 d2 d3 d3 d4"  >
        我是div元素
        <span>我是div中的span元素</span>
        <em>我是div中的em元素</em>
      </div>
</body>
</html>
<!-- 选择器的权重      
           内联样式                                1000  
           id选择器                                100
           类和伪类选择器/属性选择器                   10
           元素选择器                                1
           通配符、子选择器、相邻选择器等。如*、>、+     0000
           继承的样式      没有优先级
           !important    最高优先级
        注意：
            比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示
            (并集选择器)分组选择器是单独计算的
            如果优先级计算后相同，此时则优先使用靠下的样式
            选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器  量变达不到质变 
          
            一般来说：
            选择器越具体，优先级越高
            
            !important  慎用 
   -->

六、元素之间的相互转化（display）

<!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>
        div{
            background-color: red;
            display: inline;
            /* 将元素转成行内元素 */
            /* display: inline; */
            /* 设置元素宽度 */
            width: 300px;
            /* 设置元素的高度 */
            height: 200px;
        }
        em{
            background-color: green;
            /* 将元素转成块元素 */
            /* display: block; */
            /* 将元素转成行内块元素 */
            display: block;
            width: 300px;
            
        }
        /* display  实现元素之间的相互转换
                可选值：
                    block  将元素转成块元素
                    inline  将元素转成行内元素
                    inline-block  将元素转成行内块元素
                    none  隐藏元素
                     */
        em:hover+p{
            display: block;
        }
        p{
            /* 隐藏元素 */
            display: none;
        }
        section{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
        /* 需求一：鼠标移入section，更换背景色红色 */
        /* 需求二：strong文字隐藏，鼠标点击section的时候，strong出现 */
        section:hover{
            background-color: red;
        }
        strong{
            display: none;
        }
       section:active>strong{
           display: block;
       }
    </style>
</head>
<body>
    <!-- 
        元素分类
            块元素
                1.独占一行
                2.宽度是父元素或祖先元素内容区宽度
                3.高度是被内容撑开
                    可以自定义宽高
            行内元素
                1.不会独占一行
                2.宽高都是被内容撑开，不可以自定义宽高
            行内块元素
                兼具块元素和行内元素的特点，即不会独占一行，可以设置宽高
     -->
     <div>
        <!-- 制若活陛常褒者畴一小币不才，大韩了德使。
     </div>
     <span>回预不临。</span>
     <em>洪承和一一化心否收笔而骂在种人，言上个。</em>
     <p>后别仄娇那松，系大贤，便促书。</p> -->

     <section>
        <strong>地有韩德。</strong>
     </section>
</body>
</html>