سی ایس ایس سلیکٹر

سی ایس ایس سلیکٹر

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

ਅਸੀਂ ਕ੍ਰਿਪਟ ਚੋਜੂਕਰ ਨੂੰ ਪੰਜ ਵਰਗਾਂ ਵਿੱਚ ਵੰਡ ਸਕਦੇ ਹਾਂ:

ਇਹ ਪੰਨਾ ਸਭ ਤੋਂ ਬਹੁਤ ਸਰਲ ਕ੍ਰਿਪਟ ਚੋਜੂਕਰ ਬਾਰੇ ਵਿਸ਼ੇਸ਼ ਵਿਸ਼ਾਲ ਪ੍ਰਦਾਨ ਕਰੇਗਾ。

CSS آئٹم انتخاب کئے گئے

元素选择器根据元素名称来选择 HTML 元素。

ਇੰਸਟੈਂਸ

ਇੱਥੇ ਪੰਜੀਕਰਨ ਪੰਨੇ ਉੱਤੇ ਸਾਰੇ <p> ਅੰਗਾਮ ਮੱਧ ਵਿੱਚ ਸਥਾਨਾਂਤਰਿਤ ਹੋਣਗੇ ਅਤੇ ਲਾਲ ਰੰਗ ਵਾਲੇ ਹੋਣਗੇ:

p {
  text-align: center;
  color: red;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

CSS id ਚੋਣਕਾਰ

id ਚੋਣਕਾਰ HTML ਅੰਗਾਮ ਦੇ id ਅਤੀਤ ਰੂਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵਿਸ਼ੇਸ਼ ਅੰਗਾਮ ਨੂੰ ਚੁਣਦਾ ਹੈ。

ਅੰਗਾਮ ਦਾ id ਪੰਜੀਕਰਨ ਪੰਨੇ ਵਿੱਚ ਇੱਕੋ ਜਿਹਾ ਨਹੀਂ ਹੁੰਦਾ, ਇਸ ਲਈ id ਚੋਣਕਾਰ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਅੰਗਾਮ ਨੂੰ ਚੁਣਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ!

ਵਿਸ਼ੇਸ਼ id ਵਾਲੇ ਅੰਗਾਮ ਨੂੰ ਚੁਣਨ ਲਈ ਇੱਕ ਵਿਰਾਸਤੀ (＃) ਅਕਸ਼ਰ ਲਿਖੋ ਅਤੇ ਫਿਰ ਅੰਗਾਮ ਦਾ id。

ਇੰਸਟੈਂਸ

ਇਹ CSS ਨਿਯਮ id="para1" ਵਾਲੇ HTML ਅੰਗਾਮ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰੇਗਾ:

#para1 {
  text-align: center;
  color: red;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ:id ਨਾਮ ਅੰਕ ਨਾਲ ਨਹੀਂ ਸ਼ੁਰੂ ਹੋ ਸਕਦਾ。

CSS ਵਰਗ ਚੋਣਕਾਰ

ਵਰਗ ਚੋਣਕਾਰ ਵਿਸ਼ੇਸ਼ class ਵਾਲੇ HTML ਅੰਗਾਮ ਨੂੰ ਚੁਣਦਾ ਹੈ。

ਵਿਸ਼ੇਸ਼ class ਵਾਲੇ ਅੰਗਾਮ ਨੂੰ ਚੁਣਨ ਲਈ ਇੱਕ ਪੁਆਇੰਟ (.) ਅਕਸ਼ਰ ਲਿਖੋ ਅਤੇ ਫਿਰ ਕਲਾਸ ਨਾਮ。

ਇੰਸਟੈਂਸ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਸਾਰੇ class="center" ਵਾਲੇ HTML ਅੰਗਾਮ ਲਾਲ ਰੰਗ ਵਾਲੇ ਅਤੇ ਮੱਧ ਵਿੱਚ ਸਥਾਨਾਂਤਰਿਤ ਹੋਣਗੇ:

.center {
  text-align: center;
  color: red;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਤੁਸੀਂ ਵੀ ਕੇਵਲ ਵਿਸ਼ੇਸ਼ HTML ਅੰਗਾਮ ਨੂੰ ਵਰਗ ਦੇ ਪ੍ਰਭਾਵ ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ。

ਇੰਸਟੈਂਸ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਕੇਵਲ class="center" ਵਾਲੇ <p> ਅੰਗਾਮ ਨੂੰ ਮੱਧ ਵਿੱਚ ਸਥਾਨਾਂਤਰਿਤ ਕੀਤਾ ਜਾਵੇਗਾ:

p.center {
  text-align: center;
  color: red;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

HTML ਅੰਗਾਮ ਵੀ ਕਈ ਵਰਗ ਨਾਮ ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹਨ。

ਇੰਸਟੈਂਸ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ <p> ਅੰਗਾਮ ਕਲਾਸ="center" ਅਤੇ class="large" ਦੇ ਅਧਾਰ `ਤੇ ਸਟਾਈਲ ਸੈਟ ਕੀਤਾ ਜਾਵੇਗਾ:

<p class="center large">ਇਹ ਪੰਕਤੀ ਦੋ ਵਰਗ ਨਾਮ ਦਾ ਉਪਯੋਗ ਕਰਦਾ ਹੈ。</p>

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ:ਵਰਗ ਨਾਮ ਅੰਕ ਨਾਲ ਨਹੀਂ ਸ਼ੁਰੂ ਹੋ ਸਕਦਾ!

CSS ਜਨਰਿਕ ਚੋਣਕਾਰ

ਜਨਰਿਕ ਚੋਣਕਾਰ (* ) ਪੰਜੀਕਰਨ ਪੰਨੇ ਉੱਤੇ ਸਾਰੇ HTML ਅੰਗਾਮਾਂ ਨੂੰ ਚੁਣਦਾ ਹੈ。

ਇੰਸਟੈਂਸ

ਹੇਠ ਲਿਖੇ CSS ਨਿਯਮ ਪੰਜੀਕਰਨ ਪੰਨੇ ਉੱਤੇ ਹਰੇਕ HTML ਅੰਗਾਮ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ:

* {
  text-align: center;
  color: blue;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੁੱਪ ਚੋਣਕਾਰ

ਗਰੁੱਪ ਚੋਣਕਾਰ ਸਾਰੇ ਇੱਕ ਜਿਹੇ ਸਟਾਈਲ ਵਾਲੇ HTML ਅੰਗਾਮਾਂ ਨੂੰ ਚੁਣਦਾ ਹੈ。

ਹੇਠ ਲਿਖੇ CSS ਕੋਡ ਨੂੰ ਦੇਖੋ (h1, h2 ਅਤੇ p ਅੰਗਾਮਾਂ ਨੂੰ ਇੱਕ ਜਿਹੇ ਸਟਾਈਲ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਕੀਤਾ ਗਿਆ ਹੈ):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

ਬਿਹਤਰੀਨ ਤਰੀਕੇ ਨਾਲ ਚੋਣਕਾਰਾਂ ਨੂੰ ਗਰੁੱਪ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂਕਿ ਕੋਡ ਨੂੰ ਘੱਟ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲੇ。

ਜੇਕਰ ਤੁਸੀਂ ਚੋਣਕਾਰਾਂ ਨੂੰ ਗਰੁੱਪ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਹਰੇਕ ਚੋਣਕਾਰ ਨੂੰ ਕੋਮਾ ਨਾਲ ਵੰਡੋ。

ਇੰਸਟੈਂਸ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਉਪਰੋਕਤ ਕੋਡ ਵਿੱਚ ਚੋਣਕਾਰਾਂ ਨੂੰ ਗਰੁੱਪ ਕਰਦੇ ਹਾਂ:

h1, h2, p {
  text-align: center;
  color: red;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਾਰੇ ਸਰਲ CSS ਚੋਣਕਾਰ

ਚੋਣਕਾਰ ਉਦਾਹਰਣ ਉਦਾਹਰਣ ਵਰਣਨ
.class .intro ਸਾਰੇ class="intro" ਅੰਗਾਮਾਂ ਨੂੰ ਚੁਣੋ。
#id #firstname id="firstname" کا آئٹم منتخب کریں۔
* * تمام آئٹمز منتخب کریں۔
آئٹم p تمام <p> آئٹمز منتخب کریں۔
آئٹم,آئٹم,.. div, p تمام <div> آئٹمز اور تمام <p> آئٹمز منتخب کریں۔

بڑھی پڑھیں

课外 کتاب:CSS آئٹم انتخاب کئے گئے

课外 کتاب:CSS انتخاب کا گروپ

课外 کتاب:CSS کلاس انتخاب کی تفصیلات

课外 کتاب:CSS ID انتخاب کی تفصیلات

课外 کتاب:CSS کا انتخاب کی تفصیلات

课外 کتاب:CSS وارث انتخاب

课外 کتاب:CSS بچہ آئٹم انتخاب

课外 کتاب:CSS قریبی بچہ انتخاب