CSS 特异性

ప్రత్యేకత ఏమిటి?

ఒకటి లేదా అంతకన్నా ఎక్కువ సమాన మూలకానికి సంబంధించిన సంఘర్షణాత్మక CSS నియమాలు ఉన్నప్పుడు, బ్రౌజర్ కొన్ని సూత్రాలను అనుసరించి ఏది అత్యంత ప్రత్యేకమైనది అని నిర్ణయిస్తుంది మరియు దానిని విజయవంతంగా గుర్తిస్తుంది.

ప్రత్యేకత (specificity) ను స్కోర్ / గ్రేడ్ గా భావించినప్పుడు, ఏ షైల్ప్ ప్రకటనలు మూలకానికి అనువర్తించాలో నిర్ణయించవచ్చు.

సాధారణ ఎంపికకర్త (స్టార్ *) తక్కువ ప్రత్యేకత కలిగి ఉంటుంది, అయితే ఐడి ఎంపికకర్తలు అధిక ప్రత్యేకత కలిగి ఉంటాయి!

మున్నటి ప్రత్యాహారం:ఈ ప్రత్యేకత అనేది CSS నియమాలు కొన్ని మూలకాలకు అనువర్తించకుండా ఉండటం సాధారణ కారణం, అయితే మీరు దానికి అనువర్తించాలి అని భావించవచ్చు.

特异性层次

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

ఇన్లైన్ స్టైల్స్ - ఇన్లైన్ (లైన్) స్టైల్స్ స్టైల్స్ ఎలిమెంట్స్ కు నేరుగా జోడించబడతాయి. ఉదాహరణకు <h1 style="color: #ffffff;">.

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:

కాంటెక్స్ సెలెక్టర్స్ సింగిల్ ఎలిమెంట్ సెలెక్టర్స్ కంటే మరింత ప్రత్యేకమైనవి - ఇంక్రేప్టెడ్ స్టైల్స్ మార్పుని గాను స్టైల్స్ ఎలిమెంట్స్ సమీపంలో ఉంటాయి. ఈ క్రింది సందర్భాలలో అని ఉంటుంది:

实例

వెలుపలి CSS ఫైలు నుండి వచ్చింది:

#content h1 {background-color: red;}

在 HTML 文件中：

将适用后一条规则。

特异性规则 4：

类选择器会击败任意数量的元素选择器 - 类选择器（诸如 .intro 会击败 h1、p、div 等）：

实例

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

亲自试一试

此外，通用选择器以及被继承的值拥有 0 - * యొక్క ప్రత్యేకతా విలువ నలుపుగా ఉంటుంది, body * మరియు దాని వంటి వాటికి ప్రత్యేకతా విలువ 0 ఉంటుంది. పార్టిసిపేటింగ్ విలువల ప్రత్యేకతా విలువ కూడా 0 ఉంటుంది.