Pembelajaran pemilih pseudo CSS analisis pemilih elemen pseudo

Dalam artikel sebelumnya "Apakah pemilih hierarki dalam CSS? Bagaimana cara menggunakannya? 》, kami mempelajari tentang 4 jenis pemilih hierarki Mari kita bercakap tentang pemilih pseudo ia menyediakan fungsi yang lebih kompleks, tetapi tidak sepadan secara langsung dengan elemen yang sepatutnya ada pada dokumen HTML. Terdapat dua jenis utama pemilih pseudo: unsur pseudo dan kelas pseudo. Mula-mula kita bercakap tentang pemilih unsur pseudo secara terperinci.

Pemilih unsur pseudo

pemilih unsur pseudo dalam CSS adalah untuk menambah kata kunci pada pemilih CSS yang ditentukan. Digunakan untuk menerangkan penggayaan bahagian tertentu elemen tertentu. [Pembelajaran Disyorkan: Tutorial Video CSS]

Melalui elemen pseudo, pembangun boleh menentukan gaya untuk bahagian tertentu elemen yang dipilih tanpa menggunakan ID atau atribut kelas elemen tersebut. Sebagai contoh, melalui elemen pseudo anda boleh menetapkan gaya huruf pertama dalam perenggan, atau memasukkan beberapa kandungan sebelum atau selepas elemen, dsb.

Dalam CSS1 dan CSS2, penggunaan unsur pseudo adalah sama dengan kelas pseudo dan titik bertindih : disambungkan kepada pemilih. Walau bagaimanapun, dalam CSS3, penggunaan titik bertindih tunggal untuk elemen pseudo telah ditukar kepada bertindih berganda :: untuk membezakan kelas pseudo dan unsur pseudo. Oleh itu, adalah disyorkan untuk menggunakan titik dua bertindih dan bukannya bertindih tunggal apabila menggunakan unsur-unsur pseudo.

Struktur sintaks adalah seperti berikut:

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

kini harus menggunakan dua titik bertindih, melainkan anda juga serasi dengan IE8.

Nota: Hanya satu unsur pseudo boleh digunakan dalam pemilih dan elemen pseudo mesti mengikut pemilih. Mengikut spesifikasi W3C terkini, anda harus menggunakan bertindih dua :: dan bukannya bertindih tunggal : apabila mentakrifkan unsur pseudo untuk membezakan kelas pseudo dan unsur pseudo. Walau bagaimanapun, memandangkan versi lama spesifikasi W3C tidak membuat perbezaan yang istimewa, kebanyakan penyemak imbas pada masa ini menyokong kaedah bertindih tunggal dan bertindih dua untuk mentakrifkan unsur-unsur pseudo.

CSS menyediakan satu siri elemen pseudo, seperti yang ditunjukkan dalam jadual berikut:

伪元素	例子	例子描述
::after	p::after	在每个 元素之后插入内容
::before	p::before	在每个 元素之前插入内容
::first-letter	p::first-letter	匹配每个 元素中内容的首字母
::first-line	p::first-line	匹配每个 元素中内容的首行
::selection	p::selection	匹配用户选择的元素部分
::placeholder	input::placeholder	匹配每个表单输入框（例如 ）的 placeholder 属性

::before和::after伪元素

::before 伪元素 的作用是作为定位的HTML元素的第一个子级元素，::after ** 伪元素** 的作用是作为定位的 HTML元素的最后一个子级元素。

如下示例代码展示了::before和::after伪元素的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::before和::after伪元素</title>
    <style>
        p::before {
            content: "♥";
        }

        p::after {
            content: "♥";
        }
    </style>



    <p>这是一段测试内容</p>

代码运行结果如下图所示：

如上述示例代码所示，::before伪元素和::after伪元素通常会配合content属性来为该元素增加装饰内容。

content属性用于在元素的::before伪元素和::after伪元素中插入内容。该属性具有的值如下所示：

• none：不会产生伪类元素。

• normal：::before伪元素和::after伪类元素中会被视为 none。

• text：文本内容。

• url：格式为url()，指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位。

::first-letter和::first-line伪元素

::first-letter和::first-line伪元素分别匹配文本的第一个字和第一行的样式内容。示例代码如下：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        /* 匹配第一行 */
        p::first-line {
            background-color: lightcoral;
        }

        /* 匹配第一个字 */
        p::first-letter {
            font-size: 130%;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>

代码运行结果如下图所示：

值得注意的是::first-letter和::first-line伪元素可以使用的CSS属性是有限制的。

::first-letter选择器可以设置的CSS属性：

• font属性

• color属性

• background属性

• margin属性

• padding属性

• border属性

• text-decoration属性

• vertical-align属性

• text-transform属性

• line-height属性

• float属性

• clear属性

::first-line选择器可以设置的CSS属性：

• font属性

• color属性

• background属性

• word-spacing属性

• letter-spacing属性

• text-decoration属性

• vertical-align属性

• text-transform属性

• line-height属性

• clear属性

::selection伪元素

::selection伪元素的作用是匹配用户在HTML页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了::selection伪元素的用法：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>::first-letter和::first-line伪元素</title>
    <style>
        p::selection {
            color: gold;
            background-color: red;
        }
    </style>



    <p>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己；</p>

代码运行结果如下图所示：

::placeholder伪元素

伪元素 ::placeholder 用来设置表单元素（、 元素）的占位文本（通过 HTML 的 placeholder 属性设置的文本），示例代码如下：    

<!DOCTYPE html>
<html>
<head>
    <style>
        input.text::placeholder{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br>
    <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果
</body>
</html>

代码运行结果如下图所示：

（学习视频分享：web前端入门）

Atas ialah kandungan terperinci Pembelajaran pemilih pseudo CSS analisis pemilih elemen pseudo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!