CSS ਪਸੀਵਾ ਐਲੀਮੈਂਟ

什么是伪元素？

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

例如，它可用于：

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

语法

伪元素的语法：

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

::first-line 伪元素

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

下面的例子为所有

元素中的首行添加样式：

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ:::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::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

ਆਪਣੇ ਅਨੁਭਵ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ:::first-letter ਪਸ਼ੂਆਰਥੀ ਸਿਰਫ ਬਲਾਕ ਪ੍ਰਤੀਯੋਗਿਤਾ ਪ੍ਰਤੀਯੋਗਿਤਾ

ਹੇਠਲੇ ਪ੍ਰਤੀਯੋਗਿਤਾ ਪ੍ਰਤੀਯੋਗਿਤਾ ::first-letter ਪਸ਼ੂਆਰਥੀ ਪ੍ਰਤੀਯੋਗਿਤਾ

  • ਫੰਟ ਪ੍ਰਤੀਯੋਗਿਤਾ
  • ਰੰਗ ਪ੍ਰਤੀਯੋਗਿਤਾ
  • ਬੈਕਗਰਾਊਂਡ ਪ੍ਰਤੀਯੋਗਿਤਾ
  • ਬੱਕਸ ਪੈਡਿੰਗ ਪ੍ਰਤੀਯੋਗਿਤਾ
  • ਇਨਲਾਈਨ ਪੈਡਿੰਗ ਪ੍ਰਤੀਯੋਗਿਤਾ
  • ਬੋਰਡਰ ਪ੍ਰਤੀਯੋਗਿਤਾ
  • text-decoration
  • vertical-align (ਸਿਰਫ "float" none ਹੋਣ ਤੇ)
  • text-transform
  • line-height
  • float
  • clear

ਪਸ਼ੂ-ਇਕਾਈ ਅਤੇ CSS ਕਲਾਸ

ਪਸ਼ੂ-ਇਕਾਈ ਨੂੰ CSS ਕਲਾਸ ਨਾਲ ਮਿਲਾ ਸਕਦੇ ਹਨ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉੱਪਰ ਦਾ ਉਦਾਹਰਣ ਕਲਾਸ="intro" ਦੇ ਪੈਰਾਗ੍ਰਾਫ ਦੀ ਪਹਿਲੀ ਅੱਖਰ ਲਾਲ ਰੰਗ ਅਤੇ ਵੱਡੇ ਫੋਂਟ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ。

ਬਹੁਤ ਸਾਰੇ ਪਸ਼ੂ-ਇਕਾਈ

ਵੱਧ ਤੋਂ ਵੱਧ ਪਸ਼ੂ-ਇਕਾਈਆਂ ਨੂੰ ਮਿਲਾ ਸਕਦੇ ਹਨ。

ਹੇਠ ਲਿਖੇ ਉਦਾਹਰਣ ਵਿੱਚ ਪੈਰਾਗ੍ਰਾਫ ਦੀ ਪਹਿਲੀ ਅੱਖਰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਦਿਖਾਈ ਜਾਵੇਗੀ ਅਤੇ ਫੋਂਟ ਸਾਈਜ਼ ਦਾ ਵੱਡਾ ਹੋਵੇਗਾ। ਪਹਿਲੀ ਲਾਈਨ ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਨੂੰ ਨੀਲੇ ਰੰਗ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ ਅਤੇ ਛੋਟੇ ਹਾਲਕੇ ਫੋਂਟ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ: ਇਸ ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਨੂੰ ਮੂਲ ਫੋਂਟ ਸਾਈਜ਼ ਅਤੇ ਰੰਗ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

CSS - ::before ਪਸ਼ੂ-ਇਕਾਈ

::before ਪਸ਼ੂ-ਇਕਾਈ ਇਲੈਕਟਰਨਿਕ ਇਕਾਈ ਦੇ ਸਮੱਗਰੀ ਤੋਂ ਪਹਿਲਾਂ ਕੁਝ ਸਮੱਗਰੀ ਜੋੜਨ ਲਈ ਵਰਤੀ ਜਾ ਸਕਦੀ ਹੈ।

ਹੇਠ ਲਿਖੇ ਉਦਾਹਰਣ ਵਿੱਚ ਹਰ <h1> ਇਲੈਕਟਰਨਿਕ ਇਕਾਈ ਦੇ ਸਮੱਗਰੀ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਚਿੱਤਰ ਜੋੜਿਆ ਜਾਵੇਗਾ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

CSS - ::after ਪਸ਼ੂ-ਇਕਾਈ

::after ਪਸ਼ੂ-ਇਕਾਈ ਇਲੈਕਟਰਨਿਕ ਇਕਾਈ ਦੇ ਸਮੱਗਰੀ ਤੋਂ ਬਾਅਦ ਕੁਝ ਸਮੱਗਰੀ ਜੋੜਨ ਲਈ ਵਰਤੀ ਜਾ ਸਕਦੀ ਹੈ।

ਹੇਠ ਲਿਖੇ ਉਦਾਹਰਣ ਵਿੱਚ ਹਰ <h1> ਇਲੈਕਟਰਨਿਕ ਇਕਾਈ ਦੇ ਸਮੱਗਰੀ ਤੋਂ ਬਾਅਦ ਇੱਕ ਚਿੱਤਰ ਜੋੜਿਆ ਜਾਵੇਗਾ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

CSS - ::selection ਪਸ਼ੂ-ਇਕਾਈ

::selection ਪਸ਼ੂ-ਇਕਾਈ ਮੈਚ ਯੂਜ਼ਰ ਦੁਆਰਾ ਚੁਣੇ ਗਏ ਇਕਾਈ ਦਾ ਹਿੱਸਾ ਪਛਾਣਦੀ ਹੈ।

ਹੇਠ ਲਿਖੇ CSS ਸ਼ਤਾਬਦੀ ਪਸ਼ੂ-ਇਕਾਈਆਂ 'ਤੇ ਲਾਗੂ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ: ::selection:

  • color
  • background
  • cursor
  • outline

ਹੇਠ ਲਿਖੇ ਉਦਾਹਰਣ ਵਿੱਚ ਚੁਣੇ ਗਏ ਟੈਕਸਟ ਨੂੰ ਪੀਲੇ ਪਿੱਨ ਉੱਪਰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਾਰੇ CSS ਪਸ਼ੂ-ਇਕਾਈ

ਚੋਣਕਾਰ ਉਦਾਹਰਣ ਉਦਾਹਰਣ ਵਰਣਨ
::after p::after ਹਰ <p> ਇਲੈਕਟਰਨਿਕ ਇਕਾਈ ਤੋਂ ਬਾਅਦ ਸਮੱਗਰੀ ਜੋੜੋ।
::before p::before ਹਰ <p> ਇਲੈਕਟਰਨਿਕ ਇਕਾਈ ਤੋਂ ਪਹਿਲਾਂ ਸਮੱਗਰੀ ਜੋੜੋ।
::first-letter p::first-letter ਹਰ ਪਹਿਲੀ <p> ਇਲੈਕਟਰਨਿਕ ਇਕਾਈ ਦੀ ਪਹਿਲੀ ਅੱਖਰ ਚੋਣ ਕਰੋ।
::first-line p::first-line ਹਰ ਪਹਿਲੀ <p> ਇਲੈਕਟਰਨਿਕ ਇਕਾਈ ਦੀ ਪਹਿਲੀ ਲਾਈਨ ਚੋਣ ਕਰੋ।
::selection p::selection ਚੋਣਕਾਰ ਦੇ ਉਪ-ਭਾਗ ਚੁਣੇ ਹੋਏ

ਸਾਰੇ CSS ਪਸੰਦ ਕਰਨ ਵਾਲੇ ਕਿਸਮ

ਚੋਣਕਾਰ ਉਦਾਹਰਣ ਉਦਾਹਰਣ ਵਰਣਨ
:active a:active ਸਰਗਰਮ ਲਿੰਕ ਚੁਣੇ ਹੋਏ
:checked input:checked ਹਰ ਪ੍ਰਕਾਰ ਦੇ ਚੁਣੇ ਹੋਏ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ
:disabled input:disabled ਹਰ ਪ੍ਰਕਾਰ ਦੇ ਨਾ-ਸਕਾਰਾਤਮਕ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ
:empty p:empty ਹਰ ਪ੍ਰਕਾਰ ਦੇ <p> ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ ਜਿਨ੍ਹਾਂ ਨੂੰ ਸ਼ਿਸ਼ਟ ਨਹੀਂ ਹੈ
:enabled input:enabled ਹਰ ਪ੍ਰਕਾਰ ਦੇ ਸਕਾਰਾਤਮਕ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ
:first-child p:first-child ਪਿਤਾ ਦੇ ਪਹਿਲੇ ਸ਼ਿਸ਼ਟ ਦੇ ਹਰ ਪ੍ਰਕਾਰ ਦੇ <p> ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ
:first-of-type p:first-of-type ਪਿਤਾ ਦੇ ਪਹਿਲੇ <p> ਇਲੈਕਟ੍ਰੋਨ ਦੇ ਹਰ ਪ੍ਰਕਾਰ ਦੇ <p> ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ
:focus input:focus ਜਿਨ੍ਹਾਂ <input> ਇਲੈਕਟ੍ਰੋਨ ਨੂੰ ਫੋਕਸ ਦਿੱਤਾ ਗਿਆ ਹੈ ਉਨ੍ਹਾਂ ਚੁਣੇ ਹੋਏ
:hover a:hover ਸ਼ਿਸ਼ਟ ਉੱਤੇ ਮਾਉਸ ਚੁੰਬਨ ਦੇ ਹੇਠਲੇ ਲਿੰਕ ਚੁਣੇ ਹੋਏ
:in-range input:in-range ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਕੀਤੇ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ ਜਿਨ੍ਹਾਂ ਦੇ ਕੀਮਤ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕੀਤੇ ਗਏ ਰੈਂਜ ਦੇ ਅੰਦਰ ਹੈ
:invalid input:invalid ਸਾਰੇ ਬੇਕਾਰ ਕੀਤੇ ਗਏ ਕੀਤੇ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ
:lang(language) p:lang(it) ਹਰ ਪ੍ਰਕਾਰ ਦੇ <p> ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ ਜਿਨ੍ਹਾਂ ਦੇ lang ਪ੍ਰਤੀਯਾਇਕ ਵਾਲੇ ਕੀਤੇ ਗਏ ਕੋਡ "it" ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ
:last-child p:last-child ਆਖਰੀ ਸ਼ਿਸ਼ਟ ਦੇ ਪਿਤਾ ਦੇ ਹਰ ਪ੍ਰਕਾਰ ਦੇ <p> ਇਲੈਕਟ੍ਰੋਨ
:last-of-type p:last-of-type ਆਖਰੀ ਪਿਤਾ ਦੇ <p> ਇਲੈਕਟ੍ਰੋਨ ਦੇ ਹਰ ਪ੍ਰਕਾਰ ਦੇ <p> ਇਲੈਕਟ੍ਰੋਨ
:link a:link ਸਾਰੇ ਨਾ-ਵਿਜਿਤ ਲਿੰਕ ਚੁਣੇ ਹੋਏ
:not(selector) :not(p) ਹਰ ਪ੍ਰਕਾਰ ਦੇ ਇਲੈਕਟ੍ਰੋਨ ਚੁਣੇ ਹੋਏ ਜੋ <p> ਨਹੀਂ ਹਨ
:ਦੂਜਾ-ਬੱਚਾ(n) p:ਦੂਜਾ-ਬੱਚਾ ਆਖਰੀ ਸ਼ਿਸ਼ਟ ਦੇ ਪਿਤਾ ਦੇ ਦੂਜੇ ਸ਼ਿਸ਼ਟ ਦੇ ਹਰ ਪ੍ਰਕਾਰ ਦੇ <p> ਇਲੈਕਟ੍ਰੋਨ
:ਆਖਰੀ-ਬੱਚਾ(n) p:ਆਖਰੀ-ਬੱਚਾ(2) ਆਖਰੀ ਸ਼ਿਸ਼ਟ ਤੋਂ ਚੁਣੇ ਹੋਏ ਪਹਿਲੇ ਸ਼ਿਸ਼ਟ ਦੇ ਪਿਤਾ ਦੇ ਦੂਜੇ ਸ਼ਿਸ਼ਟ ਦੇ ਹਰ ਪ੍ਰਕਾਰ ਦੇ <p> ਇਲੈਕਟ੍ਰੋਨ
:ਆਖਰੀ-ਤੋਂ-ਪਹਿਲਾਂ-ਤੋਂ-ਤੀਜਾ(n) p:ਆਖਰੀ-ਤੋਂ-ਪਹਿਲਾਂ-ਤੋਂ-ਤੀਜਾ ਪੁਰਾਤਨ ਦੇ ਦੂਜੇ <p> ਇਲੈਕਟ੍ਰੋਨ ਵਾਲੇ ਹਰ ਇਲੈਕਟ੍ਰੋਨ <p> ਚੋਣ ਕਰੋ ਕਿਉਂਕਿ ਆਖਰੀ ਸਿੰਧੀ ਤੋਂ ਗਿਣਿਆ ਗਿਆ ਹੈ
:nth-of-type(n) p:nth-of-type(2) ਆਪਣੇ ਪੁਰਾਤਨ ਦੇ ਦੂਜੇ <p> ਇਲੈਕਟ੍ਰੋਨ ਵਾਲੇ ਹਰ ਇਲੈਕਟ੍ਰੋਨ <p> ਚੋਣ ਕਰੋ。
:only-of-type p:only-of-type ਆਪਣੇ ਪੁਰਾਤਨ ਦੇ ਇੱਕਮਾਤਰ <p> ਇਲੈਕਟ੍ਰੋਨ ਵਾਲੇ ਹਰ ਇਲੈਕਟ੍ਰੋਨ <p> ਚੋਣ ਕਰੋ。
:only-child p:only-child ਜਿਸ ਵਿੱਚ ਆਪਣੇ ਪੁਰਾਤਨ ਦੇ ਇੱਕਮਾਤਰ ਸਿੰਧੀ ਇਲੈਕਟ੍ਰੋਨ <p> ਚੋਣ ਕਰੋ。
:optional input:optional ਜਿਸ ਵਿੱਚ "required" ਅਤਿਅੰਤ ਵਿਸ਼ੇਸ਼ਤਾ ਨਹੀਂ ਦਿੱਤੀ ਗਈ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੋਣ ਕਰੋ。
:out-of-range input:out-of-range ਜਿਸ ਵਿੱਚ ਮੁੱਲ ਨਾਲ ਨਿਰਧਾਰਿਤ ਸੀਮਾ ਤੋਂ ਬਾਹਰ ਹੋਣ ਵਾਲੇ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੋਣ ਕਰੋ。
:read-only input:read-only ਜਿਸ ਵਿੱਚ "readonly" ਅਤਿਅੰਤ ਵਿਸ਼ੇਸ਼ਤਾ ਦਿੱਤੀ ਗਈ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੋਣ ਕਰੋ。
:read-write input:read-write ਜਿਸ ਵਿੱਚ "readonly" ਅਤਿਅੰਤ ਵਿਸ਼ੇਸ਼ਤਾ ਨਹੀਂ ਦਿੱਤੀ ਗਈ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੋਣ ਕਰੋ。
:required input:required ਜਿਸ ਵਿੱਚ "required" ਅਤਿਅੰਤ ਵਿਸ਼ੇਸ਼ਤਾ ਦਿੱਤੀ ਗਈ <input> ਇਲੈਕਟ੍ਰੋਨ ਚੋਣ ਕਰੋ。
:root root ਇਲੈਕਟ੍ਰੋਨ ਦੇ ਮੂਲ ਇਲੈਕਟ੍ਰੋਨ ਚੋਣ ਕਰੋ。
:target #news:target ਮੌਜੂਦਾ ਸਰਗਰਮ #news ਇਲੈਕਟ੍ਰੋਨ ਚੋਣ ਕਰੋ (ਜਿਸ ਵਿੱਚ ਇਹ ਬੰਦਲ ਨਾਮ ਦਾ URL ਸ਼ਾਮਲ ਹੈ)。
:valid input:valid ਸਾਰੇ ਪ੍ਰਮਾਣਿਤ ਮੁੱਲ ਵਾਲੇ <input> ਇਲੈਕਟ੍ਰੋਨ
:visited a:visited ਸਾਰੇ ਦੇਖੇ ਗਏ ਲਿੰਕਾਂ ਨੂੰ ਚੋਣ ਕਰੋ。