伪类伪元素

柚子会一直发光的

已于 2022-07-14 23:17:11 修改

阅读量86

点赞数

文章标签：大数据前端 html css

于 2022-07-14 23:14:58 首次发布

本文链接：https://blog.csdn.net/m0_72699629/article/details/125749947

版权

1）

在选择器后可以通过:添加伪类，

伪类是在一定条件下才能触发的样式。

hover：当鼠标指针在元素上悬停时触发。

2） visited：a标签的专用属性，表示访问过的。

3）

focus：当元素成为焦点时触发。

焦点：

用户可以交互的元素才能成为焦点。

一个页面中同一时刻只有一个元素能够成为焦点。

4）选择元素文本中的第一个字。

5）选择第一行

6） before：前缀伪元素，为元素添加一个前缀。

7） after：后缀伪元素，为元素添加一个后缀。

8）完整代码如下：

<!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>
        #link{
            text-decoration: none;
            color: black;
        }
       
        #link:hover{
            text-decoration: underline;
            color: blue;
        }

        span:hover{
            background-color: aqua;
        }
        
        #link:visited{
            color: grey;
        }
        
        #field:focus{
            width: 300px;
        }

        p{
            text-indent: 2em;
        }
        
        p::first-letter{
            font-size: 30px;
            background-color: #ccf;
        }
      
        p::first-line{
            color: red;
        }
        .currency::before{
           
            content: "￥";
            color: red;
            font-size: 30px;
        }
      
        .currency::after{
            content: "好";
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <a id="link" href="https://www.baidu.com/">百度</a>
    <span>123</span>
    <br>
    <input id="field" type="text" name="" id="">
    <p>我们生活在一个五彩斑斓的世界，在这个世界里不光有着美丽的风景，同样也有着不同个性、不同气质、不同人格魅力的人。在漫漫的人生途中，你会相识相遇很多的人，不同的人身上有着不同的品质及魅力，欣赏、喜欢和爱，便成了我们最难把握的尺度。</p>

    <table>
        <tr>
            <td>温婉</td>
            <td class="currency">价值</td>
        </tr>
        <tr>
            <td>贤良</td>
            <td class="currency">美德</td>
        </tr>
        <tr>
            <td>美好</td>
            <td class="currency">愿望</td>
        </tr>
    </table>
</body>
</html>

10）运行结果：