CSS的简单学习（2）

最新推荐文章于 2024-05-22 19:36:03 发布

wqksoul

最新推荐文章于 2024-05-22 19:36:03 发布

阅读量148

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/wqksoul/article/details/127972004

版权

01伪类选择器

<!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自动一直设置为红色 */
        /* 需求二：给所有诗句加背景色，除了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>
    <div><h1>沁园春·雪</h1></div>
    <h3>毛泽东</h3>
    <ul>
      <span>测试</span>
      <li>北国风光，千里冰封，万里雪飘。</li>
      <li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
      <li class="l1">山舞银蛇，原驰蜡象，欲与天公试比高。</li>
      <li>须晴日，看红装素裹，分外妖娆。</li>
      <li>江山如此多娇，引无数英雄竞折腰。</li>
      <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
      <li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
      <li>俱往矣，数风流人物，还看今朝。</li>
    </ul>
</body>
</html>

一、伪类（不存在的类，特殊的类）

定义：不真实存在的类，它表示元素的一种状态

例如：第一名，倒数第一名，鼠标悬浮物，鼠标点击等

常用的伪类选择器

语法‘:’(冒号开头)

:first-child 第一个元素（所有子元素里面的第一个）

:last-child 最后一个元素

:nth-child() 选中第几个

特殊值：2n或even 偶数

2n+1或odd 奇数

n 所有

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

:first-of-type 第一个元素（同标签里面的第一个）

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

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

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

二、:not() 否定伪类

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

02超链接的伪类

<!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>
        /* 需求一：给未访问过的超链接加颜色字体 */
        a:link{
            color: orange;
        }
        /* 需求二：给访问过的超链接加字体颜色 */
        a:visited{
            color: green;
            /* 以下样式不生效 */
            font-size: 50px;
            background-color: pink;
        }
        /* 需求三：鼠标移入，链接字体变大 */
        a:hover{
            font-size: 30px;
        }
        h1:hover{
            color: yellow;
            background-color: blue;
        }
        /* 需求四：鼠标点击后，增加背景色 */
        a:active{
            background-color: pink;
        }
        div:active{
            color: red;
        }
    </style>
</head>
<body>
    <h1>连拆非。</h1>
    <a href="#">空链接1</a>
    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.jd.com/">京东</a>
</body>
</html>

1、‘:link’ 没有访问过的状态

2、‘:visited’ 访问过的状态

注意：1、‘:link’和‘:visited’是超链接（a标签）独有的伪类

2、由于隐私问题，‘:link’和‘:visited’只能设置颜色

3、‘:hover’ 鼠标移入的状态

4、‘:active’ 鼠标点击后的状态

03伪元素选择器

<!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>
        /* 需求一：让文章的首字母一直为字体24px */
        /* 需求二：让文章第一行添加背景颜色 */
        /* 需求三：让选中的内容，添加字体颜色 */
        /* 需求四：在元素开始的位置前+‘abc’ */
        p::first-letter{
            font-size: 30px;
        }
        p::first-line{
            background-color: yellow;
        }
        p::selection{
            color: red;
        }
        p::before{
            content: "你好";
        }
        p::after{
            content: "你也好啊";
        }
    </style>
</head>
<body>
    <p>
        youth means a temperamental predominance of courage over timidity, 
        of the appetite for adventure over the love of ease. 
        This often exists in a man of 60 more than a boy of 20. 
        Nobody grows old merely by a number of years. We grow old by deserting our ideals.
    </p>
</body>
</html>

伪类：不存在的内容

1、‘::first-letter’ 第一个字母

2、‘::first-line’ 第一行

3、‘::selection’ 选中的内容

4、‘::before’ 在元素的最前面

要配合content使用

5、‘::after’ 在元素的最后面

要配合content使用

04继承

<!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>
        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>   
    </p>
</body>
</html>

共同的祖先元素统一字体的大小

样式的继承（继承祖先资产）

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

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

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

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

05选择器的权重

<!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>
        #dv{  /* id选择器  100 */
            background-color: pink;
      } 
        [id]{  /*  属性选择器  10 */
            background-color: hotpink;
      } 
        .dd.d1.d1.d3{  /*  class选择器  10 */
            background-color: red;
      }
        #dv span{  /*  id选择器  100 */
            color: red;
      }
        .dd>span{  /* class选择器  10 */
            color: green;
      }
        div,.dd{  /* 并集选择器   内联样式比class选择器权重大，所以div生效*/
        background-color: green;
      }
    </style>
</head>
<body>
    <div id="dv" class="dd d1 d2 d3 d3 d4" >  <!-- <div style="color=yellow; font-size=32px">权重最大  1000 -->
        我是div元素
        <span>我是div元素里的span元素</span>
        <em>我是div元素里的em元素</em>
    </div>
</body>
</html>

样式冲突：

给同一个元素设置同样的样式名，不一样的样式值，最终哪个样式有效果

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

选择器的权重

内联样式 1000

id选择器 100

class选择器/属性选择器 10

元素选择器 1

通配选择器 0

继承样式没有权重

注意：

1、如果选择器权重一样，谁靠下，谁就生效

2、让所有选择器的权重相加，谁大谁生效

3、在并集选择器（群组选择器）当中，选择器的权重是各算个的，谁大谁生效

4、所有的选择器权重相加最高也不会超过上一级的权重，如再多的选择器相加，也不会超过id选择器

5、！important 是最高权重但慎用

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

如果样式设置不成功：

1、你没选中

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

06display

<!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; */
            width: 300px;  /* 设置宽度 */
            height: 200px;  /* 设置高度 */
        }
        em{
            background-color: green;
            /* 将元素转换成块元素 */
            /* display: block */
            /* 将元素转换成行内块元素 */
            display: inline-block;
            width: 300px;
            height: 300px;
        }
        span{
            background-color: blue;
            width: 300px;
            height: 300px;
        }
        em:hover~p{
            display: block;
        }
        p{
            /* 隐藏元素 */
            display: none;
        }
        section{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        /* 需求一：鼠标移入section，更换背景色 */
        /* 需求二：strong文字隐藏，鼠标点击section的时候，strong出现 */
        section:hover{
            background-color: red;
        }
        strong{
            display: none;
        }
       section:active>strong{
           display: block;
       }
    </style>
</head>
<body>
    <div>
         并厅上畴否的落有胆过事罪连回高于修长慧。
    </div>
    <span>妙起馆，自啦在人，娟憾登，其。</span>
    <em>韩颜觉公一所罪吴专快是张老这。</em>
    <span>文人后冈国后在下虽，什光病为。</span>
    <p>的光对变之服锐贤可。</p>

    <section>
        <strong>人为未时身，和韩不归韩特尽同洪，都赠的。</strong>
    </section>
</body>
</html>

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

可选值：

block 将元素转换成块元素

inline 将元素转换成行内元素

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

none 隐藏元素