Navigation menu

0755-82192581
  • Contact us
  • 0755-82192581
  • 深圳市罗湖区佳宾路深华贸易大厦9楼(地铁1号线国贸站B出口既是)

    3375726676@qq.com


    © 2007-2021 All Rights Reserved.
  • 战略型高端网站设想公司

    Strategic advanced website design company

    View More
  • 网站开辟中的CSS 伪元素

    时候:2022-12-24  作者:尼高GARY  来历:http://expovol.com

    网站开辟中咱们常常会提到伪静态,伪元素是 CSS 中一个风趣的局部。它们许可您对设想停止良多小的调剂。可是,特别是初学者一起头能够会被它们弄胡涂。鄙人文中,咱们将为您供给 CSS 伪元素的初学者指南。咱们将诠释它们是甚么、它们若何任务和您能够利用它们做甚么。


    深圳网站开辟

    为了诠释甚么是伪元素,最好从一个例子起头。这是一个很是简略的 HTML 页面,此中包罗一个指向款式表的链接和一个零丁的段落元素。
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <p>CSS pseudo-element test</p>
    </body>
    </html>
    可是,当咱们在阅读器中查抄页面时,它是如许的:CSS pseudo-element test,您能够会注重到呈现在段落后面的箭头,即便它不存在于 HTML 文档中。这是由于链接的款式表包罗以下标记:p::before {content: "→ ";}

    下面是一个相称规范的 CSS 挑选器。可是,凸起的是before它后面的双冒号加号。那是咱们的伪元素。在这类环境下,它做了一件很是简略的工作,它在方针挑选器的外部 HTML 后面增加一个元素,并安排在其值中界说的内容。在这类环境下,这是一个箭头,方针元素是页面上的每一个段落元素。可是,风趣的是箭头并不呈现在 HTML 自身中。相反,您只能看到一个伪元素并且能够查抄其内容。这是阅读器开辟职员东西中的模样:


    网站开辟

    这类表现得像元素而不是元素的偏向便是伪元素得名的缘由。正如咱们将鄙人面的示例中看到的那样,它还对他们的行动有一些影响。

    除上述::before元素,另外一个最风行的伪元素是::after。望文生义,它的感化与方针不异,::before只是在方针的开端建立子元素。

    除这两个,另有这些元素:

    ::backdrop – 建立一个与用户视口一样大的框,许可您为任何转为全屏的元素(比方视频)的背景设置款式。
    ::cue – 您能够利用它来设置 WebVTT 提醒的款式,这象征着视频中的字幕和标题等外容。
    ::first-letter– 定位块级元素(比方p,h2,div)中第一行的第一个字母。这也能够象征着在::before元素外部。
    ::first-line– 与::first-letter块元素的全部第一行不异,但针对全部第一行。
    ::file-selector-button– 建立一个<input>元素的按钮type="file"。
    ::marker – 使您能够设置列表项标记的款式,比方名方针记列表或编号列表。
    ::part()– 许可您在"part="用称号标记的影子树中定位特定的 HTML 元素。Shadow-tree 元素是经由过程 JavaScript 增加的。更多信息在这里。
    ::placeholder– 利用它来设置外部<input>和<textarea>元素的占位符文本的款式。
    ::selection – 一个 CSS 伪元素,您能够利用它对用户凸起显现的文本利用款式(比方,经由过程单击并拖动光标)。
    ::slotted()- 方针元素标记<slot>为款式。

    除此以外,阅读器还不完整撑持一些伪元素(或,在某些环境下,底子不撑持):

    ::cue-region – 可是,也用于款式化字幕和标题,将它们作为一个全体而不是零丁定位。
    ::grammar-error– 以特定体例标记阅读器已辨认为语法毛病的文本。今朝不撑持任何阅读器。
    ::spelling-error– 近似于::grammar-error但拼写毛病。今朝也不撑持任何阅读器。
    ::target-text– 许可您设置阅读器经由过程链接跳转转动到的文本的款式。今朝阅读器撑持依然有点整齐不齐。

    相干案例

    OTHER CASE