CSS సెలెక్టర్ గ్రూపింగ్

选择器分组

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。

可以将任意多个选择器分组在一起，对此没有任何限制。

ఏదైనా అనేక ఎంపికకర్తలను ఒక గ్రూపులో కలపవచ్చు, దీనికి ఏ పరిమితి లేదు.

ఉదాహరణకు, అనేక మేకపులను గ్రే రంగులో చూపించడానికి మీరు ఈ విధమైన నియమాలను ఉపయోగించవచ్చు:

提示：శరీరం, h2, p, table, th, td, pre, strong, em {color:gray;}

గ్రూపింగ్ ద్వారా, సృష్టికర్తలు కొన్ని రకాల షైప్టులను 'కంప్రెస్' చేసి, సరళమైన షైప్టుల పట్టికను పొందవచ్చు.

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

స్వయంగా ప్రయత్నించండి

గ్రూపులు కొన్ని ఆసక్తికరమైన ఎంపికలను అందిస్తాయి. ఉదాహరణకు, ఈ ఉదాహరణలో అన్ని నియమాలు గ్రూపులు సమానంగా ఉన్నాయి, ప్రతి గ్రూప్ ఎంపికకర్తలు మరియు ఘటనలు గ్రూపులను ప్రదర్శించడానికి వివిధ పద్ధతులను ప్రదర్శిస్తాయి:

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

స్వయంగా ప్రయత్నించండి:

请注意，group 3 中使用了“声明分组”。稍后我们会为您介绍“声明分组”。

通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

例如，下面的规则可以使文档中的每个元素都为红色：

* {color:red;}

స్వయంగా ప్రయత్నించండి

ఈ ప్రకటన అనేది డాక్యుమెంట్లో అన్ని ఎలిమెంట్స్ ఒక గ్రూప్ సెలెక్టర్ గా ప్రకటించబడింది. అనుక్రమ సెలెక్టర్ ఉపయోగించి, ఒక స్టార్ ప్రేస్ ఒక్కసారి దాకా డాక్యుమెంట్లో అన్ని ఎలిమెంట్స్ కాలర్ అట్రిబ్యూట్ విలువను red గా నిర్దేశించవచ్చు.

ప్రకటన గ్రూప్

మాకు షేడ్లను గ్రూప్ చేయగలిగినప్పుడు, ప్రకటనలను గ్రూప్ చేయగలిగినప్పుడు కూడా చేయవచ్చు.

మీరు అనుకుంటే అన్ని h1 ఎలిమెంట్స్ కొరకు రెడ్ బ్యాక్‌గ్రౌండ్ ఉండాలి, మరియు 28 పిక్సెల్స్ పొడవున్న Verdana ఫాంట్ను నీలి టెక్స్ట్ రంగులో చూపించాలి అని అనుకుంటే, ఈ షేడ్‌లను వ్రాయవచ్చు:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

కానీ ఈ పద్ధతి యొక్క సమర్థన చాలా తక్కువగా ఉంది. మరియు అనేక షేడ్లను కలిగిన ఒక ఎలిమెంట్ కొరకు ఈ జాబితాను తయారు చేయడం చాలా కష్టం కాగలదు. ప్రతిపరిణామంగా, మాకు ప్రకటనలను గ్రూప్ చేయవచ్చు:

h1 {font: 28px Verdana; color: white; background: black;}

ఇది ముంది 3 ప్రకటనలకు సమానంగా ప్రభావం చేస్తుంది.

గమనించండి, ప్రకటనలను గ్రూప్ చేయడానికి, ప్రతి ప్రకటన చివరిలో గుర్తుసూచకాన్ని వాడటం ముఖ్యం. బ్రౌజర్ షేడ్‌లో వైడ్స్ ను తప్పించుకుంటుంది. గుర్తుసూచకాన్ని చేర్చినప్పుడు, ఈ ఫార్మాట్లను స్వేచ్ఛగా ఉపయోగించవచ్చు:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

స్వయంగా ప్రయత్నించండి

ఎలా కనిపించింది, పైన వ్రాసిన రూపం స్పష్టంగా ఉందా?

కానీ, రెండవ గుర్తుసూచకాన్ని విస్మరించినప్పుడు, యూజర్ ఏజెంట్ ఈ షేడ్‌లు ఈ విధంగా గుర్తిస్తుంది:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

స్వయంగా ప్రయత్నించండి

ఎందుకంటే background కాలర్ కోసం అనుమతించబడని విలువ ఉంది మరియు color కొరకు ఒక కీర్తిని మాత్రమే తప్పనిసరిగా నిర్దేశించాలి, దానికి కారణంగా యూజర్ ఏజెంట్ ఈ color ప్రకటనను పూర్తిగా తప్పించుకుంటుంది (background: black భాగంతో కలుపుకుంటుంది). ఈ విధంగా h1 శీర్షిక కేవలం నీలి రంగులో కనిపిస్తుంది, రెడ్ బ్యాక్‌గ్రౌండ్ లేదు, కానీ హెచ్1 కేవలం నీలి రంగులో కనిపించకపోయే అవకాశం ఉంది. ప్రతిపరిణామంగా, ఈ శీర్షికలు మూలతః మూలంగా రంగులో కనిపిస్తాయి (సాధారణంగా నీలి), మరియు బ్యాక్‌గ్రౌండ్ రంగు లేదు. font: 28px Verdana ప్రకటన సరిగా పనిచేస్తుంది, ఎందుకంటే అది ఒక గుర్తుసూచకంగా ముగిస్తుంది.

与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，也更易维护。

提示：在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。

结合选择器和声明的分组

我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。

下面的规则为所有标题指定了一种复杂的样式：

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

స్వయంగా ప్రయత్నించండి

ఈ నియమం అన్ని పేర్లను స్క్రీన్‌లో తెలుపు బ్యాక్‌గ్రౌండ్ కలిగిన కంకర రంగు టెక్స్ట్లుగా నిర్వచిస్తుంది. దాని లోపలి పాదప్రాంతం 10 పిక్సెల్స్ ఉంటుంది, 1 పిక్సెల్ స్ట్రైండ్ బార్డర్ ఉంటుంది, మరియు వర్ణం వెర్డానా ఉంటుంది.