menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Web前端——CSS伪类和伪元素

武飞扬头像
枕鸿
帮助1人

 CSS伪类：

1.伪类的概念：

        可以理解为描述元素的某种状态，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

2.伪类的语法：

        标签:伪类{设置的样式，伪类可以与 CSS 类配合使用}

  1.  
    /* 鼠标覆盖在元素上面显示红色 */
  2.  
    div:hover{
  3.  
    background-color: red;
  4.  
    }

3.伪类的常用实例

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

4.常用伪类：

伪类选择器 例子 作用
:hover a:hover 鼠标覆盖在元素上状态
:active a:active 鼠标在元素上并按下左键
:link a:link 元素链接点击前的样式
:visited a:visited 元素链接点击后的样式
:focus input:focus 获取焦点的样式
:frst-child li:first-child 第一个子级
:frst-of-type ul li:first-of-type 特定的第一个子级
:last-child li:last-child 最后一个子级
:last-of-type ul li:last-child 特定的最后一个子级
:nth-child(n)  li:nth-child(2n) 第n个子元素（2n为2的倍数）
:nth-of-type(n) li:nth-of-type(3n 1) 指定类型的第n个子元素（3n 1为3的倍数 1）
:nth-last-child(n) li:nth-last-child(n) 倒数第n个子元素
:nth-last-of-type(n) li:nth-last-of-type(n) 指定类型的倒数第n个子元素
  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>伪类选择器</title>
  8.  
    <style>
  9.  
    div{
  10.  
    /* 常态 */
  11.  
    width: 100px;
  12.  
    height: 100px;
  13.  
    background-color: pink;
  14.  
    }
  15.  
    /* 鼠标覆盖在元素上面显示红色 */
  16.  
    div:hover{
  17.  
    background-color: red;
  18.  
    }
  19.  
    a:link{
  20.  
    /* 链接前 */
  21.  
    color: tomato;
  22.  
    }
  23.  
    a:visited{
  24.  
    /* 链接后 */
  25.  
    color: skyblue;
  26.  
    }
  27.  
    a:hover{
  28.  
    /* 鼠标覆盖 */
  29.  
    cursor: pointer;
  30.  
    /* 鼠标覆盖后变小手效果 */
  31.  
    }
  32.  
    a:active{
  33.  
    /* 响应 */
  34.  
    /* 鼠标在元素上并按下左键 */
  35.  
    color:pink;
  36.  
    }
  37.  
    input{
  38.  
    outline: 0;
  39.  
    }
  40.  
    input:focus{
  41.  
    /* 获取焦点 （获取光标） */
  42.  
    border: 2px solid orange;
  43.  
    }
  44.  
    li:first-child{
  45.  
    /* 只能是第一个li，li是第一个只级 */
  46.  
    color: red;
  47.  
    }
  48.  
    li:last-child{
  49.  
    color: red;
  50.  
    }
  51.  
    ul li:first-of-type{
  52.  
    /* 第一个li类型的标签，li不用是第一个子元素 */
  53.  
    color: skyblue;
  54.  
    }
  55.  
    li:nth-child(2){
  56.  
    color:purple;
  57.  
    }
  58.  
    /* 2n为2的倍数 3n 1等公式*/
  59.  
    li:nth-of-type(2n){
  60.  
    color: hotpink;
  61.  
    }
  62.  
    </style>
  63.  
    </head>
  64.  
    <body>
  65.  
    <div></div>
  66.  
    <a href="https://ac.csdn.net">CSDN</a>
  67.  
    <br>
  68.  
    <input type="text">
  69.  
    <ul>
  70.  
    <h1>送给各位同学</h1>
  71.  
    <li>劝学诗</li>
  72.  
    <li>书中自有千钟粟。</li>
  73.  
    <li>书中自有黄金屋。</li>
  74.  
    <li>书中有马多如簇。</li>
  75.  
    <li>书中自有颜如玉。</li>
  76.  
    </ul>
  77.  
    </body>
  78.  
    </html>
  79.  
    <!-- a标签有4种伪类，建议按顺序书写 -->
  80.  
    <!-- link visited hover active -->
学新通

学新通

CSS伪元素：

1. 伪元素的概念：

        可以理解为某个元素的子元素，但不存在于html中。用于创建一些不在文档树中的元素，并为其添加样式。

2.伪元素的语法：

        标签::伪类{设置的样式，伪类可以与 CSS 类配合使用}

  1.  
    p::before{
  2.  
    content:"大家好，我是";
  3.  
    color:orange;
  4.  
    }

3.伪元素的常用实例：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

4.常用伪元素：        

伪元素选择器 例子 作用
::before    

p::before

 在元素前插入内容
::after

p::after

 在元素后插入内容
::selection

p::selection

 选择用户选择的元素部分
::frst-line    

div::first-line

 文本的第一行样式
::first-letter    

div::first-letter

 选择文本的首字母，只用于块元素
::placeholder

input::placeholder

 只用于表单的提示文本
  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>伪元素</title>
  8.  
    <style>
  9.  
    p{
  10.  
    color:skyblue;
  11.  
     
  12.  
    }
  13.  
    p::before{
  14.  
    content:"大家好，我是";
  15.  
    color:orange;
  16.  
    }
  17.  
    p::after{
  18.  
    content:"，欢迎大家学习c1";
  19.  
    color:tomato;
  20.  
    }
  21.  
    p::selection{
  22.  
    color:blue;
  23.  
    }
  24.  
    div{
  25.  
    width:400px;
  26.  
    }
  27.  
    div::first-line{
  28.  
    color: tomato;
  29.  
    }
  30.  
    div::first-letter{
  31.  
    font-size:40px;
  32.  
    }
  33.  
    input::placeholder{
  34.  
    color: pink;
  35.  
    }
  36.  
    </style>
  37.  
    </head>
  38.  
    <body>
  39.  
    <p>伪元素</p>
  40.  
    <div>富家不用买良田,书中自有千钟粟。安居不用架高堂,书中自有黄金屋。出门莫恨无人随,书中车马多如簇。娶妻莫恨无良媒,书中自有颜如玉。男儿若遂平生志,六经勤向窗前读</div>
  41.  
    <input type="text" placeholder="测试工具">
  42.  
    </body>
  43.  
    </html>
学新通

学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgcjeja
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群