伪类和伪元素

最新推荐文章于 2024-09-01 02:07:48 发布

garrulousabyss

最新推荐文章于 2024-09-01 02:07:48 发布

阅读量95

点赞数

分类专栏：前端一条龙文章标签：前端 javascript html

本文链接：https://blog.csdn.net/garrulousabyss/article/details/127329568

版权

前端一条龙专栏收录该内容

12 篇文章 0 订阅

订阅专栏

伪类

伪类就是开头为冒号的关键字：

:pseudo-class-name

简单伪类示例
让我们看下一个简单的示例。如果我们想要让一篇文章中的第一段变大加粗，可为此段加上一个类，然后为那个类添加 CSS，正如下面的示例展示的这样：

伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

::pseudo-element-name

::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。

例子

<!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>
</head>
<body>
    <style>
        article p:first-child {
            color: red;
            font-size: 120%;
            font-weight: bold;
        }   

        article section::first-line {
            color: blue;
            font-size: 120%;
            font-weight: bold;
        }   

    </style>

    <article>
        <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
                melon azuki bean garlic.</p>
    
        <section>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
                greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</section>
    </article>
</body>
</html>