CSS Sanal Sınıf

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
请将鼠标悬停在我上面

语法

伪类的语法：

selector:pseudo-class {
  property: value;
}

锚伪类

链接能够以不同的方式显示：

Örnek

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
/* 已选择的链接 */
a:active {
  color: #0000FF;
}

Deneyin

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

Örnek

a.highlight:hover {
  color: #ff0000;
}

Deneyin

悬停在 <div> 上

在 <div> 元素上使用 :hover 伪类的实例：

Örnek

div:hover {
  background-color: blue;
}

Deneyin

Basit araç ipucu fareni sürükleyin

<div> öğesine fareni sürükleyerek <p> öğesini gösterin (benzer bir araç ipucu etkisi):

Üzerime gelip <p> öğesini göstermek için fareni sürükleyin.

嘿嘿，我在这里！

Örnek

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Deneyin

CSS - :first-child sahte sınıfı

:first-child Sahte sınıflar, belirtilen öğeyle eşleşen belirli bir öğeyle eşleşir: Bu öğe, başka bir öğenin ilk alt öğesidir.

İlk <p> öğesini eşleştirir

Aşağıdaki örnekte, seçici, herhangi bir öğenin ilk alt öğesi olarak atanmış herhangi bir <p> öğesini eşleştirir:

Örnek

p:first-child {
  color: blue;
}

Deneyin

Tüm <p> öğelerindeki ilk <i> öğesini eşleştirir

Aşağıdaki örnekte, seçici, tüm <p> öğelerindeki ilk <i> öğesini eşleştirir:

Örnek

p i:first-child {
  color: blue;
}

Deneyin

Tüm ilk <p> öğelerindeki tüm <i> öğelerini eşleştirir

Aşağıdaki örnekte, seçici, bir başka öğenin ilk alt öğesi olarak atanmış tüm <p> öğelerindeki tüm <i> öğelerini eşleştirir:

Örnek

p:first-child i {
  color: blue;
}

Deneyin

CSS - :lang sahte sınıfı

:lang Sahte sınıflar, farklı diller için özel kurallar tanımlamanıza olanak tanır.

Aşağıdaki örnekte,:lang lang="en" özelliğine sahip <q> öğesine atıphane tanımlayın:

Örnek

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>

Deneyin

Daha fazla örnek

Bağlantılara farklı stiller ekleyin
Bu örnek, diğer stiller eklemek için nasıl bağlantılara stil ekleyeceğinizi gösterir.
:focus kullanarak
Bu örnek, :focus sahte sınıfını nasıl kullanacağınızı gösterir.

Tüm CSS sahte sınıfları

Seçici Örnek Örnek açıklaması
:active a:active Aktif bağlantıları seçin.
:checked input:checked Seçili tüm <input> öğelerini seçin.
:disabled input:disabled Engelli tüm <input> öğelerini seçin.
:empty p:empty Her tüm <p> öğesinin alt öğesi olmayanlarını seçin.
:enabled input:enabled Etkin olan her <input> elementini seçin.
:first-child p:first-child Ebeveynin ilk çocuk elementi olan her <p> elementi seçin.
:first-of-type p:first-of-type Ebeveynin ilk <p> elementi olan her <p> elementi seçin.
:focus input:focus Odaklanmış olan <input> elementini seçin.
:hover a:hover Üzerinde farenin bulunduğu bağlantıyı seçin.
:in-range input:in-range Belirtilen aralık içindeki değerlere sahip <input> elementlerini seçin.
:invalid input:invalid Geçersiz değerlere sahip tüm <input> elementlerini seçin.
:lang(language) p:lang(it) Lang özniteliğinin "it" ile başlayan her <p> elementi seçin.
:last-child p:last-child Ebeveynin son çocuk elementi olan her <p> elementi seçin.
:last-of-type p:last-of-type Ebeveynin son <p> elementi olan her <p> elementi seçin.
:link a:link Ziyaret edilmiş olmayan tüm bağlantıları seçin.
:not(selector) :not(p) Her <p> elementinin dışındaki elementleri seçin.
:nth-child(n) p:nth-child(2) Seçilen <p> elementinin eşi olan ikinci çocuk <p> elementi.
:nth-last-child(n) p:nth-last-child(2) Son çocuk sayısından başlayarak ebeveynin ikinci çocuk elementi olan her <p> elementi seçin.
:nth-last-of-type(n) p:nth-last-of-type(2) Son çocuk sayısından başlayarak ebeveynin ikinci <p> elementi olan her <p> elementi seçin.
:nth-of-type(n) p:nth-of-type(2) Seçilen <p> elementinin ikinci çocuk <p> elementi.
:only-of-type p:only-of-type Seçilen <p> elementinin eşi olan her <p> elementi.
:only-child p:only-child Seçilen <p> elementinin eşi olan tek çocuk <p> elementi.
:optional input:optional "required" özelliğini içermeyen <input> elementlerini seçin.
:out-of-range input:out-of-range Belirtilen aralık dışındaki değerlere sahip <input> elementlerini seçin.
:read-only input:read-only "readonly" özelliğini belirtilen <input> elementlerini seçin.
:read-write input:read-write "readonly" özelliğini içermeyen <input> elementlerini seçin.
:required input:required "required" özelliğini belirtilen <input> elementlerini seçin.
:root root Düzenin kök elementini seçin.
:target #news:target Şu an etkin olan #news elementini seçin (bu bağlantı isminde olan URL'yi tıklayarak).
:valid input:valid Tüm geçerli değerlere sahip <input> elementlerini seçin.
:visited a:visited Tüm ziyaret edilmiş bağlantıları seçin.

Tüm CSS sahte elementleri seçin.

Seçici Örnek Örnek açıklaması
::after p::after Her <p> elementi sonrasına içerik ekleyin.
::before p::before Her <p> elementi öncesine içerik ekleyin.
::first-letter p::first-letter Her <p> elementinin ilk harfini seçin.
::first-line p::first-line Her <p> elementinin ilk satırını seçin.
::selection p::selection Kullanıcı tarafından seçilen elementin bir kısmını seçin.