Статья для понимания псевдоклассов и псевдоэлементов

внешний интерфейс JavaScript CSS
Статья для понимания псевдоклассов и псевдоэлементов

Цель этой статьи: решить проблему неразличимости псевдоклассов и псевдоэлементов!

Для ясности я разделил на 3 части:

  1. Отличие псевдоклассов от псевдоэлементов
  2. Разобраться с псевдоклассами и псевдоэлементами
  3. заявление

1.gif

различать

псевдоэлемент вCSS3Он существовал и раньше, но в нем нет оператора псевдоэлемента, все классифицируется как псевдокласс, и многие люди не могут отличить псевдокласс от псевдоэлемента. такие как обычно используемые:beforeа также:after, это псевдоклассы или псевдоэлементы? по фактуCSS3ранее известные как псевдоклассы, покаCSS3Официально выделен как псевдоэлементы.

Итак, как отличить псевдоэлементы и псевдоклассы, запомните два момента:

1. Псевдокласс представляет определенное состояние выбранного элемента, например:hover

2. Псевдоэлемент представляет собой часть выбранного элемента.Эта часть выглядит как независимый элемент, но это "псевдоэлемент", который существует только в CSS, поэтому он называется "псевдо"элементом, например:beforeа также:after

Основное различие заключается в том, создается ли «новый элемент»

Классификация и сортировка

Так как псевдоклассов и псевдоэлементов много, для удобства памяти обобщаю их в виде следующих двух рисунков:

псевдоэлемент

image.png

псевдокласс

2.png

заявление

Перед псевдоэлементом CSS3

Включая до, после, первую букву и первую строку, которые соответственно представляют переднюю часть содержимого элемента, заднюю часть содержимого элемента, первый текст и первую строку текста.

Например

image.png

код показывает, как показано ниже

div.box1{
    border: 1px rgb(5, 248, 114) solid;
    background: rgb(221, 132, 214);
    background-clip: content-box;
    width: 400px;
    padding: 10px;
}
/* 伪元素before和after */
div.box1:before{
    content: "我是前面的before";
    color: rgb(177, 81, 13);
}
div.box1:after{
    content: "我是后面的after";
    color: rgb(243, 29, 72);
}
/* 伪元素:first-letter和:first-line*/
div.box2:first-letter{
    font-size: 3em;
    font-weight: bold;
}
div.box2:first-line{
    color: rgb(101, 245, 6);
}

Новые псевдоэлементы после CSS3

Включая выделение и заполнитель, представляющий выделенную часть и текст заполнителя соответственно.

Например

image.png

код показывает, как показано ниже

div.section::selection{
    color: rgb(247, 8, 135);
}
input.placeholder::placeholder{
    background-color: rgb(80, 156, 231);
    color: rgb(19, 235, 235);
}

Псевдокласс класса состояния

Есть ссылка, посещение, наведение, активный и фокус, соответственно, указывающие на ссылку в нормальном состоянии, после нажатия, при наведении, при активации и при фокусе.

следующим образом

image.png

код показывает, как показано ниже

a{
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;	
}
a.link:link{	
    background-color: rgb(71, 130, 240);	
}
a.visited:visited{
    color: rgb(128, 126, 126);
    background-color: rgb(203, 218, 151);
}
a.hover:hover{
    background-color: rgb(221, 51, 142);
}
a.active:active{
    font-size: 2em;
}
a.focus:focus{
    background-color: rgb(247, 142, 4);
}

Структурный псевдокласс

Структурные псевдоклассы болееimage.pngиспользовать ниже

image.png

код показывает, как показано ниже

p:not(.p1) {
    font-size: .8em;
}
p:first-child {
    font-weight: bold;
}
p:last-child{
    color: rgb(86, 168, 5);
}
p:only-child{
    color: lightcoral;
    background-color: rgb(193, 247, 193);
}
p:nth-child(2n){
    background-color: lightseagreen;
}
p:nth-last-child(3){
    color: #f44;
}

Типовая серия используется чаще, потому что она выделяет элементы одного типа. Поскольку использование в основном такое же, я не буду пробовать это здесь.

Давайте посмотрим на псевдоклассы, связанные с формой

Псевдоклассы, связанные с формой

Существует также более 10 псевдоклассов, связанных с формами, а именно:

image.png

давайте попробуем несколько

image.png

код показывает, как показано ниже

input:checked{
    width: 25px;
    height: 25px;
}
input:disabled{
    background: rgb(168, 163, 163);
    color: rgb(128, 120, 120);
}
input:enabled{
    background: rgb(150, 205, 223);
}
.empty:empty{
    height: 1em;
    margin: 10px 0;
    background-color: rgb(231, 26, 231);
}

другие псевдоклассы

В том числе root, fullscreen, dir и lang и т.д., на самом деле они мало используются, но попробуйте и это, например, установить фон на черный через псевдокласс root

image.png

код

:root{
    background-color: rgb(12, 12, 12);
}

Выше приведен краткий обзор псевдоклассов и псевдоэлементов.Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение и дайте мне знать, спасибо

END

Приложение: Исходный код приведенного выше примера

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>源代码</title>
    <style type="text/css">
            :root {
                    background-color: rgb(12, 12, 12);
            }

            div.box1 {
                    border: 1px rgb(5, 248, 114) solid;
                    background: rgb(221, 132, 214);
                    background-clip: content-box;
                    width: 400px;
                    padding: 10px;
            }
            /* 伪元素before和after */
            div.box1:before {
                    content: "我是前面的before";
                    color: rgb(177, 81, 13);
            }
            div.box1:after {
                    content: "我是后面的after";
                    color: rgb(243, 29, 72);
            }
            /* 伪元素:first-letter和:first-line*/
            div.box2:first-letter {
                    font-size: 3em;
                    font-weight: bold;
            }
            div.box2:first-line {
                    color: rgb(101, 245, 6);
            }
            /* 伪元素selection和placeholder */
            div.section::selection {
                    color: rgb(247, 8, 135);
            }
            input.placeholder::placeholder {
                    background-color: rgb(80, 156, 231);
                    color: rgb(19, 235, 235);
            }
            /* 状态伪类 */
            a {
                    text-decoration: none;
                    padding: 10px;
                    border-radius: 5px;
            }
            a.link:link {
                    background-color: rgb(71, 130, 240);
            }
            a.visited:visited {
                    color: rgb(128, 126, 126);
                    background-color: rgb(203, 218, 151);
            }
            a.hover:hover {
                    background-color: rgb(221, 51, 142);
            }
            a.active:active {
                    font-size: 2em;
            }
            a.focus:focus {
                    background-color: rgb(247, 142, 4);
            }
            /* 结构性伪类 */
            p:not(.p1) {
                    font-size: .8em;
            }
            p:first-child {
                    font-weight: bold;
            }
            p:last-child {
                    color: rgb(86, 168, 5);
            }
            p:only-child {
                    color: lightcoral;
                    background-color: rgb(193, 247, 193);
            }
            p:nth-child(2n) {
                    background-color: lightseagreen;
            }
            p:nth-last-child(3) {
                    color: #f44;
            }
            /* 表单相关 */
            input:checked {
                    width: 25px;
                    height: 25px;
            }
            input:disabled {
                    background: rgb(168, 163, 163);
                    color: rgb(128, 120, 120);
            }
            input:enabled {
                    background: rgb(150, 205, 223);
            }
            .empty:empty {
                    height: 1em;
                    margin: 10px 0;
                    background-color: rgb(231, 26, 231);
            }
    </style>
</head>
<body>
    <!-- 伪元素 -->
    <div class="box1">元素内容</div>
    <div class="box2">另外一个div</div>
    <br>
    <div class="section">
            这里有很多内容这里有很多内容这里有很多内容
    </div>
    <input type="text" placeholder="这里是占位符" class="placeholder"><br><br>
    <!-- 状态伪类 -->
    <a href="#" class="link">正常链接</a>
    <a href="#" class="visited">点击过后</a>
    <a href="#" class="hover">悬停时</a>
    <a href="#" class="active">被激活状态</a>
    <a href="#" class="focus">获得焦点时</a>
    <!-- 结构类伪类 -->
    <div class="p">
            <p class="p1">这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
    </div>
    <div>
            <p>独生子</p>
    </div>
    <br><br>
    <!--元素的禁用和启用状态-->
    <input type="checkbox" checked />
    <input type="checkbox" />
    <input type="text" value="禁用了" disabled />
    <input type="text" value="启用的" />
    <div class="empty"></div>
    <br><br><br><br>
</body>

</html>
Категории