我的CSS学习笔记（二）

最新推荐文章于 2024-10-06 15:01:40 发布

比尔盖茨接班人班长

最新推荐文章于 2024-10-06 15:01:40 发布

阅读量83

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/m0_56424512/article/details/127971953

版权

08.伪类选择器

一 ,伪类(不存在的类,特殊的类)

定义:不真实存在的类,是一种特殊的类,它表示的元素的一种状态,不是固定某一定

例如:第一名,倒数第一名,鼠标悬浮,鼠标点击等

常见的伪类选择器

语法使用':'开头

:first-child 第一个元素

:last-child 最后一个元素

:nth-child() 选中第几个元素

特殊值:

2n或even 偶数

2n+1或odd 奇数

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

:first-of-type 第一个元素

:last-of-type 最后一个元素

:nth-of-type() 选中第几个元素

—功能跟上面相似,不同的是,这是在同类型的子元素中去选择

二,:not() 否定伪类

-将符合条件的元素从选择器中去除 */

<!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+1或odd   奇数

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

            :first-of-type 第一个元素
            :last-of-type  最后一个元素
            :nth-of-type()   选中第几个元素
         
          —功能跟上面相似,不同的是,这是在同类型的子元素中去选择
                          
      */
      /* 二,:not() 否定伪类
           -将符合条件的元素从选择器中去除  */
        /* 需求二:给所有诗句加背景色,除了l1 */
        span: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 id="l1">望长城内外,惟余莽莽;大河上下,顿失滔滔.</li>
      <li>惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚.</li>
      <li>须晴日,看红装素裹,分外妖娆.</li>
      <li>江山如此多娇,引无数英雄竞折腰.</li>

    </ul>
  </body>
</html>

09.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: bisque;
        }
        /* 二：给访问过的超链接加绿色字体 */
        a:visited{
            color: aliceblue;
        }
        /* 注意：1.  ：link和：visited是a标签独有的伪类
                 2.由于隐私问题，link和visited只能设置字体颜色    */
        /* 三：鼠标移入，链接字体变大30px */
        /* 3.hover  鼠标移入的状态 */
        a:hover{
            font-size: 81px;
            color: aliceblue;
        }
       
        /* 四：鼠标点击后，增加背景色 */
        /* 4.active  鼠标点击后的状态 */
        a:active{
            background-color: aliceblue;
        }
         /* hover和active针对所有。都能用 */
    </style>



</head>
<body>



    
</body>
</html>

10.伪元素选择器

/* 需求一：让文章的首字母一直为字体为24px */

/* 1、::first-letter 第一个字母 */

/* 需求二：让文章的第一行添加背景色黄色 */

/* 2、::first-line 第一行 */

/* 需求三：让选中的内容，字体为红色 */

/* 3、::selection 选中的内容 */

/* 重要 */

/* 需求四：在元素开始的位置前+'abc' */

/* 4、::before 在元素的最前面

必须要配合content样式名使用 */

/* 4、::after 在元素的最后面

必须要配合content样式名使用 */

<!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样式名使用 */
    /* 4、::after  在元素的最后面 
              必须要配合content样式名使用 */
    p::first-letter {
      font-size: 34px;
    }

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

    p::selection {
      color: red;
    }

    p::before {
      content: "你好";
    }

    p::after {
      content: '你也好啊';
    }
  </style>
</head>

<body>
  <q>hello</q>
  <p>
    sit amet consectetur adipisicing elit. Porro fugiat maiores sit ex expedita beatae, sint quisquam amet quod
    cupiditate, tempora omnis impedit deleniti, iure fuga illo quibusdam. Alias,
    soluta?
  </p>
</body>

</html>

11.继承

/* 样式的继承(继承祖先的资产)

定义:给父元素或者祖先元素设置有关样式,它会继承到子元素或后代元素上,

优势:一般情况下,样式的继承是对我们开发是有利,不需要额外调整

注意:不是所有的样式都能继承,一般情况布局上样式

/* 共同的祖先元素,设置统一的字体大小,字体颜色,行高,字体等 */

<!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>

12.选择器的权重

<!--

样式冲突:给同一个元素设置相同的样式名,不一样的样式值,最终哪个样式有效果,

是看选择器的权重,谁的权重高,就有效果

选择器的权重

内联样式 1000

id选择器 100

class选择器/属性选择器 10

元素选择器 1

通配选择器 0

继承样式没有权重

注意:

1,如果选择器的权重一样,那么谁靠下,就谁生效

2,要让所有选择器的权重相加,最终谁大听谁的

3,所有的选择器权重相加,最高也不会超过上一等级的权重,如再多的类选择器权重相加,也不会超过id选择器权重

4,在并集选择器(群组选择器)当中,选择器权重是各算各的,最终谁大听谁的

5,!important 是最高的权重但慎用

一般情况下,可以测试使用,测试是否是选择器权重的问题

-->

<!--

如果样式设置不成功:

1,你没选中

2,选择器权重问题 !important进行测试

-->

<!-- 选择器权重

内联样式 1000

id选择器 100

class选择器/属性选择器 10

元素选择器 1

通配选择器 0

继承样式没有权重

注意:

1.如果0

.选择器权重一样,谁靠下谁生效

2.要让所有选择器相加,最终谁大听谁的

3.在并集选择器(群组选择器当中),选择器权重各算个的

4. !important 是最高的权重但慎用,一般情况下可以测试使用

测试是否是选择器权重的问题

5.所有的选择器权重相加,最高也不会超过上一等级

一般来说:

选择器越具体,优先级越高

--> -->

<!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进行测试
  -->





            <!-- 选择器权重
            内联样式  1000
            id选择器  100
            class选择器/属性选择器  10
            元素选择器   1
            通配选择器   0
            继承样式    没有权重
            注意:
            1.如果0
            .选择器权重一样,谁靠下谁生效
            2.要让所有选择器相加,最终谁大听谁的
            3.在并集选择器(群组选择器当中),选择器权重各算个的
            4.  !important   是最高的权重  但慎用,一般情况下可以测试使用
                测试是否是选择器权重的问题
            5.所有的选择器权重相加,最高也不会超过上一等级

            一般来说:
            选择器越具体,优先级越高
             --> -->


</head>
<body>




    
</body>
</html>

13.display

div{

background-color: pink;

/* 将元素转成行内元素 */

/* display: inline; */

/* 设置元素的宽度 */

width: 300px;

/* 设置元素的高度 */

height: 200px;

}

em{

background-color: green;

/* 将元素转成块元素 */

/* display: block; */

/* 将元素转成行内块元素 */

display: inline-block;

width: 300px;

height: 200px;

}

display 实现元素之间的相互转换

可选值：

block 将元素转成块元素

inline 将元素转成行内元素

inline-block 将元素转成行内块元素

none 隐藏元素

<!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: pink;
            /* 将元素转成行内元素 */
            /* display: inline; */
            /* 设置元素的宽度 */
            width: 300px;
            /* 设置元素的高度 */
            height: 200px;
        }
       em{
            background-color: green;
            /* 将元素转成块元素 */
            /* display: block; */
            /* 将元素转成行内块元素 */
            display: inline-block;
            width: 300px;
            height: 200px;
        }
            /* 
              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>Lorem, ipsum dolor.</em>
     <span>span乌但派交，能书其讨。</span>
     <p>郭冒因导世郭使，否。</p> -->

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