CSS خصوصیت

ਵਿਸ਼ੇਸ਼ਤਾ ਕੀ ਹੈ?

ਜੇਕਰ ਇੱਕ ਜਾਂ ਵੱਧ ਸਟਾਈਲ ਸਟੇਟਮੈਂਟ ਨੂੰ ਇੱਕ ਹੀ ਇਲਾਕੇ 'ਤੇ ਦਿਸ਼ਾ ਵਿੱਚ ਵਰਤਿਆ ਗਿਆ ਹੈ ਤਾਂ ਬਰਾਉਜ਼ਰ ਕੁਝ ਸਿਧਾਂਤਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ ਸਭ ਤੋਂ ਵਿਸ਼ੇਸ਼ ਰੂਲ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾ ਸਕੇ ਅਤੇ ਉਹ ਜਿੱਤ ਜਾਵੇ。

ਵਿਸ਼ੇਸ਼ਤਾ (specificity) ਨੂੰ ਸਕੋਰ/ਰੈਂਕ ਦੇ ਰੂਪ ਵਿੱਚ ਦੇਖਣ ਨਾਲ ਇਹ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਕਿ ਕਿਸ ਸਟਾਈਲ ਸਟੇਟਮੈਂਟ ਨੂੰ ਅੰਤਮ ਤੌਰ 'ਤੇ ਇਲਾਕੇ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇਗਾ。

ਜਨਰਿਕ ਚੋਣਕਾਰ (* ) ਨੂੰ ਨਿਮਨ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ, ਜਦਕਿ ਆਈਡੀ ਚੋਣਕਾਰ ਉੱਚ ਵਿਸ਼ੇਸ਼ਤਾ ਰੱਖਦਾ ਹੈ!

ਧਿਆਨ:ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਸੀਐੱਸਐੱਸ ਰੂਲਾਂ ਦੀ ਕੁਝ ਇਲਾਕਿਆਂ ਲਈ ਸਾਮਾਨਿਆਤਮਕ ਕਾਰਨ ਹੈ, ਭਾਵੇਂ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ ਇਹ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

特异性层次

每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：

行内样式 - 行内（内联）样式直接附加到要设置样式的元素。实例：

。

ID - ID 是页面元素的唯一标识符，例如 #navbar。

ਕਲਾਸ, ਅਟਰੀਬਿਊਟ ਅਤੇ ਪਸ਼ੂ ਸੈਲੈਕਟਰ - ਇਹ ਵਰਗ .classes, [attributes] ਅਤੇ ਪਸ਼ੂ ਸੈਲੈਕਟਰ ਜਿਵੇਂ ਕਿ :hover, :focus ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ。

ਏਲੀਮੈਂਟ ਅਤੇ ਪਸ਼ੂ ਸੈਲੈਕਟਰ - ਇਹ ਵਰਗ ਏਲੀਮੈਂਟ ਨਾਮ ਅਤੇ ਪਸ਼ੂ ਸੈਲੈਕਟਰ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ h1, div, :before ਅਤੇ :after。

ਵਿਸ਼ੇਸ਼ਤਾ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ?

ਕਿਰਪਾ ਕਰਕੇ ਵਿਸ਼ੇਸ਼ਤਾ ਲਾਗੂ ਕਰਨ ਦੀ ਤਰ੍ਹਾਂ ਯਾਦ ਰੱਖੋ!

0 ਤੋਂ ਸ਼ੁਰੂ ਕਰਕੇ style ਅਟਰੀਬਿਊਟ ਨੂੰ 1000, ਹਰ ਇੱਕ ID ਨੂੰ 100, ਹਰ ਇੱਕ ਅਟਰੀਬਿਊਟ, ਕਲਾਸ ਜਾਂ ਪਸ਼ੂ ਸੈਲੈਕਟਰ ਨੂੰ 10, ਹਰ ਇੱਕ ਏਲੀਮੈਂਟ ਨਾਮ ਜਾਂ ਪਸ਼ੂ ਸੈਲੈਕਟਰ ਨੂੰ 1 ਜੋੜੋ。

ਹੇਠ ਲਿਖੇ ਤਿੰਨ ਕੋਡ ਸਪੈਕਸ਼ਨਾਂ ਉੱਤੇ ਵਿਚਾਰ ਕਰੋ:

مثال

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ 1 (ਇੱਕ ਏਲੀਮੈਂਟ)
  • B ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ 101 (ਇੱਕ ID ਰੈਫਰੈਂਸ ਅਤੇ ਇੱਕ ਏਲੀਮੈਂਟ)
  • C ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ 1000 (ਇਨਲਾਈਨ ਸਟਾਈਲ)

ਕਿਉਂਕਿ 1 < 101 < 1000 ਇਸ ਲਈ ਤੀਜਾ ਨਿਯਮ (C) ਵਿਸ਼ੇਸ਼ਤਾ ਵਧੇਰੇ ਹੈ ਇਸ ਲਈ ਉਹ ਲਾਗੂ ਹੋਵੇਗਾ。

ਵਿਸ਼ੇਸ਼ਤਾ ਨਿਯਮ 1:

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

مثال

h1 {background-color: yellow;}
h1 {background-color: red;}

خود کو بچار کریں

ਅੱਗੇ ਦਾ ਨਿਯਮ ਹਮੇਸ਼ਾ ਲਾਗੂ ਹੁੰਦਾ ਹੈ。

ਵਿਸ਼ੇਸ਼ਤਾ ਨਿਯਮ 2:

ID ਸੈਲੈਕਟਰ ਅਟਰੀਬਿਊਟ ਸੈਲੈਕਟਰ ਤੋਂ ਵਧੇਰੇ ਵਿਸ਼ੇਸ਼ ਹੁੰਦੇ ਹਨ - ਹੇਠ ਲਿਖੇ ਤਿੰਨ ਲਾਈਨਾਂ ਦੇਖੋ:

مثال

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

خود کو بچار کریں

ਪਹਿਲਾ ਨਿਯਮ ਦੂਜੇ ਦੋ ਨੂੰ ਵਧੇਰੇ ਵਿਸ਼ੇਸ਼ ਹੈ ਇਸ ਲਈ ਉਹ ਲਾਗੂ ਹੋਵੇਗਾ。

ਵਿਸ਼ੇਸ਼ਤਾ ਨਿਯਮ 3:

ਕੰਟੈਕਸਟ ਸੈਲੈਕਟਰ ਇੱਕਲੀਨ ਏਲੀਮੈਂਟ ਸੈਲੈਕਟਰ ਤੋਂ ਵਧੇਰੇ ਵਿਸ਼ੇਸ਼ ਹੁੰਦੇ ਹਨ - ਇੰਕਰੇਸ਼ਨਲ ਸਟਾਈਲ ਸ਼ੈਟ ਸਟਾਈਲ ਪ੍ਰਤੀ ਜਿਸ ਨੂੰ ਸਟਾਈਲ ਕਰਨਾ ਹੈ ਨੇੜੇ ਹੁੰਦੇ ਹਨ। ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਮਾਮਲਿਆਂ ਵਿੱਚ:

مثال

ਕੌਸਟਮ ਕ੍ਰਿਸਟਲ ਫਾਈਲ ਤੋਂ ਆਇਆ ਹੈ:

#content h1 {background-color: red;}

ایچ تی ایم ال فائل میں:

<style>
#content h1 {
  background-color: yellow;
}
</style>

بعد کی کیوینسی کو استعمال کیاجائے گی۔

خصوصیت کی قوانین 4:

کلاس انتخاب کوئیج کوئی تعداد کا عناصر انتخاب کوئیج میں شکست دیتا ہے - کلاس انتخاب کوئیج (مثلاً .intro کی جگہ میں h1، p، div وغیرہ):

مثال

.intro {background-color: yellow;}
h1 {background-color: red;}

خود کو بچار کریں

علاوہ ازیں،عمومی انتخاب کوئیج اور متعاقب کی جاتی والی کی خصوصیت 0 ہوتی ہے - * کی خصوصیت، body * اور مشابہ کی خصوصیت 0 ہوتی ہے۔ متعاقب کی جاتی والی کی خصوصیت بھی 0 ہوتی ہے۔