伪类和继承

天降甘泉

于 2022-11-21 19:28:22 发布

阅读量174

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/Tianjiangganquan/article/details/127970801

版权

1.伪类选择器

<!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>伪类选择器</title>
    <style>
      /* 需求一:将ul里的第一个li自动一直设置为红色 */
      /* 
      一.伪类(不存在的的类 特殊的类) 
      定义:不真实存在的类, 它表示的元素的一种状态,不是固定一个
      例如:第一名, 第二名 鼠标悬浮,鼠标点击
      常见的伪类 语法使用:开头
      常见的伪类选择器
        语法使用:':'开头
        :first-child 第一个元素 (一定是先找父级!!!)
        :last-child 最后一个元素
        :nth-child() 选中第几个元素
           特殊值  2n+1 odd奇数
                   2n even偶数

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


        :first-of-type    第一个
        :last-of-type     最后一个
        :nth-of-type()    选择第几个元素
           特殊值  2n+1 odd奇数
                   2n even偶数


      
      
      -功能跟上面相似,不同的是, 这是同类型的子元素中去选择
      */
      /* 
      二.否定伪类
      -将复合条件的元素从选择器中除去
      -
       */
      li:first-of-type{
        color:blue;
      }
      li:first-child {
        color: red;
      }
      li:nth-child(2n+1){
        color:red;
      }
      li:nth-of-type(2n) {
        background-color: #333;
      }
      li:not(.l1){
        background-color: green;
      }
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      h1 {
        /* 增加下划线 */
        text-decoration: underline;
      }

    </style>
  </head>
  <body>

  </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>伪类选择器</title>
    <style>
      /* 需求一:将ul里的第一个li自动一直设置为红色 */
      /* 
      一.伪类(不存在的的类 特殊的类) 
      定义:不真实存在的类, 它表示的元素的一种状态,不是固定一个
      例如:第一名, 第二名 鼠标悬浮,鼠标点击
      常见的伪类 语法使用:开头
      常见的伪类选择器
        语法使用:':'开头
        :first-child 第一个元素 (一定是先找父级!!!)
        :last-child 最后一个元素
        :nth-child() 选中第几个元素
           特殊值  2n+1 odd奇数
                   2n even偶数

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


        :first-of-type    第一个
        :last-of-type     最后一个
        :nth-of-type()    选择第几个元素
           特殊值  2n+1 odd奇数
                   2n even偶数


      
      
      -功能跟上面相似,不同的是, 这是同类型的子元素中去选择
      */
      /* 
      二.否定伪类
      -将复合条件的元素从选择器中除去
      -
       */
      li:first-of-type{
        color:blue;
      }
      li:first-child {
        color: red;
      }
      li:nth-child(2n+1){
        color:red;
      }
      li:nth-of-type(2n) {
        background-color: #333;
      }
      li:not(.l1){
        background-color: green;
      }
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      h1 {
        /* 增加下划线 */
        text-decoration: underline;
      }

    </style>
  </head>
  <body>

  </body>
</html>

3.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;
        background-color: pink;
      }
     /* 
     注意：
       1、:link和:visited 是a标签独有的伪类
       2、由于隐私问题，:link和:visited只能设置字体颜色
     */

      /* 需求三：鼠标移入，链接字体变大到30px */
      /* 3、:hover  鼠标移入的状态 */
      a:hover{
        font-size: 30px;
      }
      h1:hover{
        color: green;
        background-color: hotpink;
      }
      /* 需求四：鼠标点击后，增加背景色pink */
      /* 4、:active  鼠标点击后的状态 */
      a:active{
        background-color: pink;
      }
      div:active{
        color: red;
      }
      /* 
      注意：
        :hover和:active  针对所有的元素
      */

    </style>
  </head>
  <body>
    <div>得龄</div>
    <h1>将王大量。</h1>
    <a href="#">空链接1</a>
    <a href="https://baidu.com">百度</a>
    <a href="https://jd.com">京东</a>

  </body>
</html>

4.伪元素选择器

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

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>
    <style>
      /* 
      定义: 给父元素或者祖先元素设置有关样式  他会继承到货代上或子元素上
      优势: 一般情况下,样式的继承是对我们的开发是有利的 不需要额外调整
      注意: 不是所有的样式都继承*/
      body {
        font-size: 12px;
        color: #3c3c3c;
      }
      p {
        color: red;
        font-size: 30px;
      }
    </style>
   
    
      
   
  </head>
  <body>
    
  </body>
</html>

6.选择器权重

<!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>
  <!-- 需求:设置div的格式 -->
  <style>
    /*
     样式冲突: 給同一個元素設置相同的样式名,不一样的样式值,最终哪个有效果? 最终是看我们选择器的权重,谁的权重高,就有效果
     选择器权重
     内联样式      1000
     id选择器      100
     class选择器/属性选择器 10
     元素选择器     1
     关系选择器
     通配选择器     0
     继承样式: 没有优先级
     注意:
     1.如果选择器权重一样,那么谁靠下,谁就生效
     2.选择器的权重,要让所有选择器的权重相加,最终谁大听谁的
     3.所有的选择器权重相加,最高也不会超过上衣等级的权重!!! 再多的类选择器权重相加也不会超过id选择器
     4.在并集选择器当中,选择器的权重是各算各的,最终谁大听谁的
     5.!important 是最高的权重 但慎用
     一般情况下可以测试使用,测试是否是选择器权重的问题
     /* 如果样式设置不成功"
          1,你没选中
          2,选择器权重问题 !important进行测试
      */
     
     div {
      background-color: green;
     }
     
  </style>
</head>
<body>
  
</body>
</html>

7.元素之间的相互转换

<!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 {
      /* 将元素转为行内元素 */
      display: inline;
      background-color: red;
      /* 设置元素的宽度 */
      width: 300px;
      /* 设置元素的高度 */
      height: 300px;
    }

    span {
      /* display: block; */
      /* 将元素转成行内块元素 */
      display: inline-block;
      background-color: green;
      width: 300px;
      height: 300px;
      /* 元素之间的相互转换,可以通过display
        display 可选值:
        block 将元素转换为块元素
        inline 将元素转化为行内元素
        inline-block 将元素转化为行内块元素
        none 隐藏元素
         */
    }

    p {
      display: 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.宽高是被内容撑开的
      不可以自定义宽高
      块元素
      1.独占一行
      2.宽度是父元素或者内容区的宽度
      3.高度是被内容撑开的
      可以自定义宽高
      行内块元素
      兼具块元素和行内元素的特点,即不会独占一行,可以设置宽高
     -->
  <div>
    <span>什的王杂。</span>
  </div>
  <span>什的王杂。</span>
  <em>Lorem ipsum dolor sit amet.</em>
  <span>年那说台面郭生张秦。</span>
  <p>求互为事二光，关王。</p>

  <section>
    <strong>入尹于你。</strong>
  </section>

</body>

</html>