伪类选择器和伪元素选择器基础（1）

超越～and me

于 2024-04-24 19:55:30 发布

阅读量483

点赞数 9

文章标签：前端 html css

本文链接：https://blog.csdn.net/2301_78986604/article/details/138167582

版权

Ⅰ 伪类选择器

伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。

动态伪类
:link	链接没有被访问前的样式效果
:visited	链接被访问后的样式效果
:hover	鼠标悬停在元素上面时的样式效果
:active	点击元素时的样式效果，即按下鼠标左键时发生的样式
:focus	用于元素成为焦点时的样式效果，常用与表单元素

动态伪类
动态伪类是一类行为类样式，这些样式不存在于HTML中，只有当用户于页面进行交互才能体现出来。动态伪类伪类选择器包括两种形式：

锚点伪类，这是一种在链接中最常见的样式，如:link、:visited。

行为伪类，也成用户操作伪类，如:hover、:active、:focus。

Ⅱ 伪元素选择器

::first-letter表示第一个字母，例如：p::first-letter{}

::first-line表示第一行（第一行内容根据屏幕大小来决定显示多少字），例如： p::first-line{}

::selection表示选中的内容

::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2024.4.24</title>
    <style>
        p::first-letter{
            font-size: 30px;
            color: blueviolet;
        }
    </style>
</head>
<body>
  
    <p>The Government has pledged to change the law to introduce a minimum service requirement so that, even when strikes occur, ..., more investment is needed, but passengers will not be willing to pay more indefinitely if they must also endure cramped, unreliable services, punctuated by regular chaos when timetables are changed, or planned maintenance is managed incompetently. The threat of nationalisation may have been seen off for now, but it will return with a vengeance if the justified anger of passengers is not addressed in short order.</p>

</body>
</html>

效果图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2024.4.24</title>
    <style>
        p::first-letter{
            font-size: 30px;
            color: blueviolet;
        }
        p::first-line{
            color: red;
        }
    </style>
</head>
<body>
  
    <p>The Government has pledged to change the law to introduce a minimum service requirement so that, even when strikes occur, ..., more investment is needed, but passengers will not be willing to pay more indefinitely if they must also endure cramped, unreliable services, punctuated by regular chaos when timetables are changed, or planned maintenance is managed incompetently. The threat of nationalisation may have been seen off for now, but it will return with a vengeance if the justified anger of passengers is not addressed in short order.</p>

</body>
</html>

效果图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2024.4.24</title>
    <style>
        p::first-letter{
            font-size: 30px;
            color: blueviolet;
        }
        p::first-line{
            color: red;
        }

        p::selection{
            color: aqua;
        }
   
    </style>
</head>
<body>
  
    <p>The Government has pledged to change the law to introduce a minimum service requirement so that, even when strikes occur, ..., more investment is needed, but passengers will not be willing to pay more indefinitely if they must also endure cramped, unreliable services, punctuated by regular chaos when timetables are changed, or planned maintenance is managed incompetently. The threat of nationalisation may have been seen off for now, but it will return with a vengeance if the justified anger of passengers is not addressed in short order.</p>

</body>
</html>

效果图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2024.4.24</title>
    <style>
        p::first-letter{
            font-size: 30px;
            color: blueviolet;
        }
        p::first-line{
            color: red;
        }

        p::selection{
            color: aqua;
        }
       
        p::after{
            content: "遇你不做智者";
            color: red;
        }
        p::before{
            content: "智者不入爱河";
            color: coral;
        }
 
    </style>
</head>
<body>
  
    <p>The Government has pledged to change the law to introduce a minimum service requirement so that, even when strikes occur, ..., more investment is needed, but passengers will not be willing to pay more indefinitely if they must also endure cramped, unreliable services, punctuated by regular chaos when timetables are changed, or planned maintenance is managed incompetently. The threat of nationalisation may have been seen off for now, but it will return with a vengeance if the justified anger of passengers is not addressed in short order.</p>

</body>
</html>

效果图

Ⅲ 伪类选择器和伪元素选择器的比较

伪类选择器是用来向某些选择器来添加效果。不修改DOM内容，通过一些特定的选择器根据特定的状态、特定条件来修改元素的样式。比如：悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。

伪元素选择器是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式（::first-letter），或者在元素之前（::before）、之后插入一些内容（::after）等等。伪元素可能改变DOM结构，创造了虚拟的DOM。

超越～and me

关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
伪类选择器和伪元素选择器基础（1）

例如通过伪元素您可以设置段落中第一个字母的样式（::first-letter），或者在元素之前（::before）、之后插入一些内容（::after）等等。比如：悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用。
复制链接

扫一扫