CSS väärentäjäelementti

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

语法

伪元素的语法：

valitsin::pseudo-element {
  property: value;
}

::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。

下面的例子为所有 <p> 元素中的首行添加样式：

Esimerkki

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Kokeile itse!

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

请注意双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

下面的例子设置所有 <p> 元素中文本的首字母格式：

Esimerkki

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Kokeile itse!

注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 外边距属性
  • 内边距属性
  • 边框属性
  • text-decoration
  • vertical-align (vain kun "float" on "none")
  • text-transform
  • line-height
  • float
  • clear

Seudoelementit ja CSS-luokat

Seudoelementit voidaan käyttää yhdessä CSS-luokkien kanssa:

Esimerkki

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Kokeile itse!

Yllä oleva esimerkki näyttää class="intro" -luokan kappaleen ensimmäisen kirjaimen punaisena ja suurena.

Useita seudoelementtejä

voidaan myös yhdistää useita seudoelementtejä.

Seuraavassa esimerkissä kappaleen ensimmäinen kirjain on punainen ja fonttikoko xx-large. Ensimmäisen rivin loput ovat sinisiä ja käyttävät pieniä isokirjaimia. Kappaleen loput ovat oletusfonttikokoisina ja -värisinä:

Esimerkki

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Kokeile itse!

CSS - ::before-seudoelementti

::before Seudoelementit voidaan käyttää sisällön lisäämiseen elementin sisällön ennen.

Seuraava esimerkki lisää kuvan jokaisen <h1>-elementin sisällön ennen:

Esimerkki

h1::before {
  content: url(smiley.gif);
}

Kokeile itse!

CSS - ::after-seudoelementti

::after Seudoelementit voidaan käyttää sisällön lisäämiseen elementin sisällön jälkeen.

Seuraava esimerkki lisää kuvan jokaisen <h1>-elementin sisällön jälkeen:

Esimerkki

h1::after {
  content: url(smiley.gif);
}

Kokeile itse!

CSS - ::selection-seudoelementti

::selection seudoelementteihin, jotka vastaavat käyttäjän valitsemia elementin osia.

Seuraavat CSS-ominaisuudet voidaan soveltaa ::selection:

  • color
  • background
  • cursor
  • outline

Seuraava esimerkki näyttää valitun tekstin keltaisella taustalla punaisena:

Esimerkki

::selection {
  color: red; 
  background: yellow;
}

Kokeile itse!

Kaikki CSS-seudoelementit

Valitsin Esimerkki Esimerkki kuvaus
::after p::after Lisää sisältöä jälkeen jokaisen <p>-elementin.
::before p::before Lisää sisältöä ennen jokaisen <p>-elementin.
::first-letter p::first-letter Valitse jokaisen <p>-elementin ensimmäinen kirjain.
::first-line p::first-line Valitse jokaisen <p>-elementin ensimmäinen rivi.
::selection p::selection Valitaan käyttäjän valitsema elementin osa.

Kaikki CSS-epätyypit

Valitsin Esimerkki Esimerkki kuvaus
:active a:active Valitaan aktiiviset linkit.
:checked input:checked Valitaan jokainen valittu <input>-elementti.
:disabled input:disabled Valitaan jokainen käytöstä poistettu <input>-elementti.
:empty p:empty Valitaan jokainen <p>-elementti, jolla ei ole lapsia.
:enabled input:enabled Valitaan jokainen käytössä oleva <input>-elementti.
:first-child p:first-child Valitaan jokainen <p>-elementti, joka on ensimmäinen lapsi isänsä ensimmäisistä lapsista.
:first-of-type p:first-of-type Valitaan jokainen <p>-elementti, joka on ensimmäinen lapsi isänsä ensimmäisistä lapsista.
:focus input:focus Valitaan keskittyneet <input>-elementit.
:hover a:hover Valitaan linkit, joihin hiiri on viedyn päällä.
:in-range input:in-range Valitaan kaikki <input>-elementit, joilla on arvo tietystä väliltä.
:invalid input:invalid Valitaan kaikki <input>-elementit, joilla on epäsyöttökelpoinen arvo.
:lang(kieli) p:lang(it) Valitaan jokainen <p>-elementti, jonka lang-ominaisuuden arvo alkaa merkillä "it".
:last-child p:last-child Valitaan jokainen <p>-elementti, joka on viimeinen lapsi isänsä viimeisistä lapsista.
:last-of-type p:last-of-type Valitaan jokainen <p>-elementti, joka on viimeinen lapsi isänsä viimeisestä lapsista.
:link a:link Valitaan kaikki vieraantuneet linkit.
:ei(valitsin) :ei(p) Valitaan jokainen elementti, joka ei ole <p>-elementti.
:niminen-toiminnallinen-tyyppi(n) p:niminen-toiminnallinen-tyyppi(2) Valitaan jokainen <p>-elementti, joka on toinen lapsi isänsä toisesta lapsista.
:niminen-toiminnallinen-tyyppi(n) p:niminen-toiminnallinen-tyyppi(2) Valitaan jokainen <p>-elementti, joka on toinen lapsi isänsä toisesta lapsista laskettuna.
:niminen-toiminnallinen-tyyppi(n) p:niminen-toiminnallinen-tyyppi(2) Valitse jokainen <p>-elementti, joka on isänsä toinen lapsi, laskien viimeisen lapsen alkaen.
:nth-of-type(n) p:nth-of-type(2) Valitse jokainen <p>-elementti, joka on isänsä toinen lapsi.
:only-of-type p:only-of-type Valitse jokainen <p>-elementti, joka on ainoa tyypiltään isältään.
:only-child p:only-child Valitse <p>-elementti, joka on ainoa lapsi sen isältään.
:optional input:optional Valitse <input>-elementit, joilla ei ole määritelty "required"-ominaisuutta.
:out-of-range input:out-of-range Valitse <input>-elementit, joiden arvo on määritetty ulkopuolella annetusta väliltä.
:read-only input:read-only Valitse <input>-elementit, joilla on määritelty "readonly"-ominaisuus.
:read-write input:read-write Valitse <input>-elementit, joilla ei ole määritelty "readonly"-ominaisuutta.
:required input:required Valitse <input>-elementit, joilla on määritelty "required"-ominaisuus.
:root root Valitse elementin juurelementti.
:target #news:target Valitse nykyinen aktiivinen #news-elementti (napsauta URL-osoitetta, joka sisältää kyseisen ankkurin nimen).
:valid input:valid Valitse kaikki <input>-elementit, joilla on kelvollinen arvo.
:visited a:visited Valitse kaikki käytetyt linkit.