CSS [विस्तृतव्याख्यानम्] शैलीचयनकर्तारः (ID, वर्गः, टैगः, वाइल्डकार्डः, विशेषता, छद्म-वर्गः, छद्म-तत्त्वः, सामग्रीविशेषणं, बालकाः, वंशजाः, भ्रातरः, समीपस्थभ्रातरः, चौराहः, संघः अन्ये चयनकर्तारः च समाविष्टाः)

2024-07-12

CSS Style selector, CSS शैल्याः योजयितुं पृष्ठे html तत्त्वानां चयनार्थं उपयुज्यते ।

उच्चतः निम्नपर्यन्तं कार्यक्षमतां प्रतिपादयित्वा क्रमयन्तु तदनन्तरं : १.

आईडी चयनकर्ता #id

तत्त्वानि तेषां id विशेषताद्वारा, केस-संवेदनशीलेन चिनोतु

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

परन्तु तस्य प्रयोगः न अनुशंसितः यतः : १.

id चयनकस्य प्राथमिकता अधिका अस्ति तथा च शैलीं पुनः सेट् कर्तुं असुविधाजनकम् अस्ति ।
id चयनकर्ता मुख्यतया JS द्वारा उपयुज्यते

वर्ग चयनकर्ता .class

तत्त्वस्य वर्गविशेषणस्य माध्यमेनशैलीचयनितस्य तत्त्वस्य वर्गनाम लघुसंवेदनशीलं भवति

सर्वाधिकं अनुशंसितः CSS चयनकर्ता अस्ति यत् वर्गचयनकर्तृणां शब्दार्थः प्रबलः भवति तथा च शैल्याः पुनः सेट् कर्तुं सुलभाः सन्ति ।

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

एकस्मिन् तत्त्वे बहुशैलीवर्गाः योजयितुं शक्यन्ते, रिक्तस्थानैः पृथक्कृताः ।

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

टैग चयनकर्ता 标签名

तत्त्वान् तेषां टैग्-नाम्ना, केस-असंवेदनशीलेन चिनोतु

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

टैगचयनकस्य दुर्बलप्रदर्शनस्य, उच्चरक्षणव्ययस्य च कारणेन न अनुशंसितम्

वाइल्डकार्ड चयनकर्ता *

पृष्ठे छद्मतत्त्वान् विहाय सर्वाणि html तत्त्वानि चिनोतु प्रायः ब्राउजर् इत्यस्य पूर्वनिर्धारितशैलीं स्वच्छं कर्तुं तस्य उपयोगः भवति, परन्तु एतत् कार्यक्षमतां उपभोगयति इति कारणेन न अनुशंसितम् ।

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

विशेषता चयनकर्ता [属性]

तेषां विशेषतानां विशेषतामूल्यानां च आधारेण तत्त्वानि चिनुत विशेषताः केस-संवेदनशीलाः न सन्ति, विशेषतामूल्यानि च केस-संवेदनशीलाः सन्ति ।

विशेषता चयनकर्ता	वर्णेतु
[गुण]	निर्दिष्टगुणयुक्तानि तत्त्वानि चयनार्थं प्रयुक्तम् ।
[गुण=मूल्यम्‌]	निर्दिष्टगुणैः मूल्यैः च सह तत्त्वानां चयनार्थं प्रयुक्तम् ।
[गुण~=मूल्यम्‌]	येषां विशेषतामूल्येषु निर्दिष्टशब्दकोशः भवति तेषां चयनार्थं प्रयुक्तम् ।
[गुण\|=मूल्यम्‌]	विशेषता मूल्यं खण्डचयनकं आरभ्य, मूल्यं सम्पूर्णं शब्दं भवितुमर्हति ।
[गुण^=मूल्यम्‌]	यस्य विशेषतामूल्यं निर्दिष्टमूल्येन आरभ्यते तस्य प्रत्येकं तत्त्वस्य मेलनं करोति ।
[गुण$=मूल्यम्‌]	यस्य विशेषतामूल्यं निर्दिष्टमूल्येन सह समाप्तं भवति तस्य प्रत्येकं तत्त्वस्य मेलनं करोति ।
[गुण=मूल्यम्‌*]	यस्य विशेषतामूल्ये निर्दिष्टं मूल्यं भवति तस्य प्रत्येकं तत्त्वस्य मेलनं करोति ।

छद्म वर्ग चयनकर्ता :状态名

तेषां भिन्नावस्थायाः आधारेण तत्त्वानां चयनं कुर्वन्तु

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

छद्म वर्ग चयनकर्ता	उदाहरण	उदाहरणवर्णनम्
:सक्रियं	क:सक्रियम्	सक्रियलिङ्कं चिनोतु। (यदा मूषकः लेबलं क्लिक् करोति परन्तु न मुञ्चति)
:परीक्षितम्	input:checked	प्रत्येकं चयनितं चिनोतु<input> तत्व।
:अक्षमित	input:अक्षमम्	प्रत्येकं अक्षमं चिनोतु<input> तत्व।
:रिक्तम्‌	प:शून्यम्	प्रत्येकं तत्त्वं चिनोतु यस्य बालतत्त्वानि नास्ति<p> तत्व।
:सक्षमम्	input:सक्षमम्	प्रत्येकं सक्षमं चिनोतु<input> तत्व।
:प्रथम-बाल	प:प्रथम-बाल	प्रत्येकं तत्त्वं चिनोति यत् तस्य मातापितुः प्रथमः बालकः अस्ति<p> तत्व।
:प्रथम-प्रकारः	प:प्रथम-प्रकारस्य	प्रथमं तस्य मातापितृरूपेण चिनोतु<p>प्रत्येकस्य तत्त्वम्<p> तत्व।
:केंद्रबिन्दुः	input:focus	यत् फोकस प्राप्नोति तत् चिनुत<input> तत्व।
:होवर	a:hover	यत् लिङ्क् भवन्तः मूषकं स्थापयन्ति तत् चिनोतु ।
:इन्-रेन्ज	input:in-range	निर्दिष्टपरिधियुक्तं मूल्यं चिनोति<input> तत्व।
:अप्रतिषेध	input:अवैधम्	अमान्यमूल्यैः सह सर्वाणि चिनोतु<input> तत्व।
:लङ्ग(भाषा)	प:लङ्ग(इत्) २.	"it" इत्यनेन आरभ्य प्रत्येकं lang एट्रिब्यूट् मूल्यं चिनोतु।<p> तत्व।
:अन्तिम-बाल	प:अन्तिम-बाल	प्रत्येकं तत्त्वं चिनोति यत् तस्य मातापितुः अन्तिमः बालतत्त्वः अस्ति<p> तत्व।
:अन्तिम-प्रकारस्य	प:अन्तिम-प्रकारस्य	अन्तिमं तस्य मातापितृरूपेण चिनोतु<p>प्रत्येकस्य तत्त्वम्<p> तत्व।
:सम्बन्ध	a:link	सर्वाणि अदृश्यानि लिङ्कानि चिनोतु।
:नहि(चयनकर्ता)	:नहि§	प्रत्येकं गैर चिनोतु<p> तत्त्वानां तत्त्वानि ।
:नथ-बाल( .न)	प:न्थ-बाल(2) .	प्रत्येकं द्वितीयं बालतत्त्वं चिनोति यत् तस्य मातापिता अस्ति<p> तत्व।
:नथ-अन्तिम-बच्चा(न)	प:नथ-अन्तिम-बालक(2)	प्रत्येकं द्वितीयं बालतत्त्वं चिनोति यत् मातापिता अस्ति<p> तत्त्वानि, अन्तिमबालतत्त्वात् गणयन् ।
:नथ-अन्तिम-प्रकार(न)	प:नथ-अन्तिम-प्रकार(2)	द्वितीयं मातापितृरूपेण चिनोतु<p>प्रत्येकस्य तत्त्वम्<p>तत्त्वानि, अन्तिमबालतत्त्वात् गणयन्
:नथ-प्रकारस्य(न)	प:ंथ-प्रकारस्य(2) .	द्वितीयं तस्य मातापितृरूपेण चिनोतु<p>प्रत्येकस्य तत्त्वम्<p> तत्व।
:केवल-प्रकारस्य	प:केवल-प्रकारस्य	एकमात्रं चिनुत यत् तस्य मातापितरौ अस्ति<p>प्रत्येकस्य तत्त्वम्<p> तत्व।
:एकमात्र-बाल	प:एकमात्र-बाल	एकमात्रं बालतत्त्वं चिनोति यत् तस्य मातापिता अस्ति<p> तत्व।
:वैकल्पिक	input:वैकल्पिक	"आवश्यक" विशेषतां विना चयनं कुर्वन्तु<input> तत्व।
:परिधितः बहिः	input:परिधितः बहिः	निर्दिष्टपरिधितः बहिः मूल्यानि चिनोतु<input> तत्व।
:पठनमात्रम्	input:पठनमात्रम्	निर्दिष्टं "readonly" विशेषणं येषां सन्ति तान् चिनोतु<input> तत्व।
:पठ-लिख	input:पठ-लिखना	"readonly" विशेषतां विना चिनोतु<input> तत्व।
:आवश्यकः	input:आवश्यक	निर्दिष्टं "required" विशेषतायुक्तं चिनोतु<input> तत्व।
:मूलं	मूलं	तत्त्वस्य मूलतत्त्वं चिनोतु ।
:लक्ष्य	# समाचार:लक्ष्य	वर्तमानकाले सक्रियं #news तत्त्वं चिनोतु (एंकरनाम युक्तं URL क्लिक् कुर्वन्तु) ।
:मान्य	input:valid	वैधमूल्यैः सह सर्वाणि चिनोतु<input> तत्व।
:भ्रष्टः	क:भ्रष्टः	सर्वाणि आगतानि लिङ्कानि चिनोतु।

सूचीषु छद्मवर्गचयनकर्तृणां उपयोगं कुर्वन्तु

छद्म वर्ग चयनकर्ता	अर्थ
लि:न्थ-बाल(2) .	द्वितीयः लि
लि:न्थ-बाल(न) २.	सर्वाणि वस्तूनि
लि:न्थ-बालक(२न) २.	सर्वे समसंख्याकाः लि
लि:न्थ-बाल(२न+१) २.	सर्वे विषमसंख्याकाः लि
लि:न्थ-बाल(-न+५) २.	प्रथमा ५ लि
लि:न्थ-अन्तिम-बालक(-न+५) २.	अन्तिम ५ लि
लि:न्थ-बालक(७न) २.	7 इत्यस्य गुणनखण्डान् चिनुत

n इत्यस्य अर्थः 0,1,2,3,4,5,6,7,8...(n 1 इत्यस्मात् न्यूने सति असिद्धं भवति, यतः n = 0 न चयनितः भविष्यति)

सारणीषु छद्मवर्गचयनकर्तृणां उपयोगं कुर्वन्तु

tr:nth-child(odd)：सारणीयाः पङ्क्तयः १, ३, ५ च मेलयति, यत् तुल्यम् अस्तिtr:nth-child(2n+1)。
tr:nth-child(even): सारणीयाः २, ४, ६ च पङ्क्तयः मेलयति, यत् तुल्यम् अस्तिtr:nth-child(2n)。
छद्मवर्गचयनकस्य व्यावहारिकं उदाहरणम्
- ज़ेबरा-पट्टिकाः, एज-संरेखणं, निर्दिष्ट-परिधि-सूची-प्रकाशनं, गतिशील-सूची-अनुकूली-विन्यासं च कार्यान्वितुं:nth-child() इत्यस्य उपयोगं कुर्वन्तु
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/122089484
- CSS गतिशीलं प्रदर्शनं गोपनं च ( :checked तथा :target इत्येतयोः अद्भुतः उपयोगः) कार्यान्वयति ।
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/126267866
- अधिकं विस्तारयितुं, संकुचनं, ट्याब् स्विचिंग् च कर्तुं: target इत्यस्य उपयोगं कुर्वन्तुhttps://blog.csdn.net/weixin_41192489/लेख/विवरण/121969768
- MaterialDesign शैली अन्तरक्रियां प्राप्तुं:placeholder-shown इत्यस्य उपयोगं कुर्वन्तु
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/121976627
- शून्यमूल्यं सत्यापयितुं Use:placeholder-shown इत्यस्य उपयोगं कुर्वन्तु तथा च प्रॉम्प्ट् रिक्तं न भवितुम् अर्हति ।
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/121977510
- :checked विस्तारं पतनं च कार्यान्वयति
  https://demo.cssworld.cn/चयनकर्ता/9/2-1.php
- :checked ट्याब् स्विचिंग् कार्यान्वयति
  https://demo.cssworld.cn/चयनकर्ता/9/2-2.php
- :checked कस्टम् रेडियो बटन्, चेक बॉक्स, स्विच, लेबल चेक, सामग्री रेडियो चयनं च कार्यान्वयति
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/122050069
- देशीरूपसत्यापनं कार्यान्वितुं :valid तथा :invalid इत्येतयोः उपयोगं कुर्वन्तु
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/122070084
- प्रपत्रसत्यापनप्रॉम्प्ट् पाठं कार्यान्वितुं :required तथा :optional इत्येतयोः उपयोगं कुर्वन्तु
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/122072879
- :focus-within ड्रॉप्-डाउन सूचीं कार्यान्वयति
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/121959850
- यदा निवेशपेटिका केन्द्रीकृता भवति तदा अग्रे लेबलं प्रकाशयन्तु (लिङ्क् मध्ये विधिः ५ पश्यन्तु) ।
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/121784196
- विस्तारितं चित्रं प्रदर्शयितुं मूषकं स्थापयन्तु vs विस्तारितं चित्रं प्रदर्शयितुं मूषकं क्लिक् कुर्वन्तु
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/121944791
- :empty रिक्ततत्त्वानि गम्यमानक्षेत्राणि च स्मार्ट-युक्तयः गोपयति
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/122086159
- :only-child बहु-अवस्था-गतिशील-भार-सजीवीकरणं कार्यान्वयति
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/122088416
- :fullscreen क्लिक् कृतानां चित्राणां पूर्णपर्दे प्रदर्शनं सक्षमं करोति
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/122328725
छद्म तत्व चयनकर्ता ::

तत्त्वस्य भागं चयनं शैलीं च कर्तुं प्रयुक्तम्, न तु सम्पूर्णं तत्त्वम्
```
CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
1
```
::before तथा::after

तत्त्वात् पूर्वं पश्चात् च सामग्रीं सेट् कर्तुं सामग्रीविशेषणेन सह तस्य उपयोगः आवश्यकः
https://blog.csdn.net/weixin_41192489/लेख/विवरण/115100040

सामान्यतया प्रयुक्ताः व्यावहारिकाः उदाहरणानि : १.
- तत्त्वेभ्यः पूर्वं पश्चात् च चिह्नानि योजयन्तु (::before and ::after इत्यस्य जादू)
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/134858462
- CSS चतुराईपूर्वकं ::after तथा ::before इत्येतयोः उपयोगं करोति ऊर्ध्वाधरवर्गस्य नेविगेशनं कार्यान्वितुं
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/134885007
- css चतुराईपूर्वकं ::after इत्यस्य उपयोगं करोति ट्याब् स्विचिंग् एनिमेशनं प्राप्तुं
  https://blog.csdn.net/weixin_41192489/लेख/विवरण/134881852
::first-letter आद्याक्षराणि
```
<p>很久很久以前</p>
<p>Long long ago</p>
1
2
```
```
p::first-letter {
  font-size: 2em;
  color: red;
}
1
2
3
4
```
::first-line प्रथमा पङ्क्तिः
```
  <div style="width: 120px">
    <p>很久很久以前，有一个白发苍苍的老人</p>
  </div>
1
2
3
```
```
p::first-line {
  color: red;
}
1
2
3
```
::selection क्षेत्रं चिन्वितुं मूषकं कर्षयन्तु
```
<p>很久很久以前，有一个白发苍苍的老人</p>
1
```
```
p::selection {
  color: red;
  background-color: yellow;
}
1
2
3
4
```
::placeholder पाठस्थानधारकः
```
<input placeholder="请输入" />
1
```
```
/* input 不写，则会选中页面所有元素的占位符 */
input::placeholder {
  color: red;
}
1
2
3
4
```
सम्बन्ध चयनकर्ता

तत्त्वानां मध्ये सम्बन्धानाम् आधारेण तत्त्वानां चयनं कुर्वन्तु

वंशज चयनकर्ता >

टैगस्य अन्तः वेष्टितः प्रथमस्तरीयः टैग् तस्य वंशजः भवति
```
<div>
    <p>我是div的儿子</p>
</div>
1
2
3
```
```
div>p{
  color:red;
}
1
2
3
```
वंशज चयनकर्ता 空格

टैगस्य अन्तः सर्वे टैग् तस्य वंशजाः भवन्ति
```
  <div class="parent">
    <p class="red">我是子代（属于后代）</p>
    <p>我是子代（属于后代，但没有 .red）</p>
    <div>
      <div class="red">我是孙代（也属于后代）</div>
    </div>
  </div>
1
2
3
4
5
6
7
```
```
/* 所有属于.parent元素内部的.red元素都将被染成红色。*/
.parent .red {
  color: red;
}
1
2
3
4
```
भ्राता चयनकर्ता ~

तस्यैव मातापितृतत्त्वस्य अधः निर्दिष्टं तत्त्वं चिनोतुअनन्तरम्‌समानस्तरस्य सर्वे तत्त्वानि एवम् कठोररूपेण वक्तुं शक्यन्ते 后面兄弟选择器
```
<div>
  <button>按钮1(不会变红)</button>
  <p>段落</p>
  <button>按钮2（会变红）</button>
</div>
1
2
3
4
5
```
```
p ~ button {
  color: red;
}
1
2
3
```
CSS नं 前面兄弟选择器 , कार्यान्वयनस्य अनुकरणार्थं अधोलिङ्कं द्रष्टुं शक्नुवन्ति
https://blog.csdn.net/weixin_41192489/लेख/विवरण/121784196

प्रतिवेशी भ्राता चयनकर्ता +

कस्यचित् तत्त्वस्य तत्क्षणमेव अग्रिमतत्त्वं चिनोति
```
  <div class="parent">
    <p>段落</p>
    <button>按钮1</button>
    <button>按钮2</button>
  </div>
1
2
3
4
5
```
```
p + button {
  color: red;
}
1
2
3
```
चौराहे चयनकर्ता

पृष्ठे तानि तत्त्वानि चिनोतु ये एकस्मिन् समये बहुचयनकर्तृणां मेलनं कुर्वन्ति
- चयनकर्तानां मध्ये रिक्तस्थानानि नास्ति (अवकाशाः वंशजचयनकाः सन्ति) ।
- यदि टैग् चयनकर्ता अस्ति तर्हि प्रथमं टैग् चयनकर्ता स्थापनीयम्
```
    <p class="red">很久很久以前1</p>
    <p>很久很久以前2</p>
1
2
```
```
/* 选中 p 标签中class值含 red 的元素 */
p.red {
  color: red;
}
1
2
3
4
```
संघ चयनकर्ता ,

बहुचयनकेषु यावत् तेषु एकः तृप्तः भवति तावत् तस्य चयनं भविष्यति ।
- बहुचयनकर्तृणां मध्ये प्रयुक्तम् , पृथक्
```
 <p class="error">报错信息</p>
 <p class="important">重要信息</p>
 <p>其他信息</p>
1
2
3
```
```
.error,
.important {
  color: red;
}
1
2
3
4
```

प्रौद्योगिकी साझेदारी

आईडी चयनकर्ता `#id`

वर्ग चयनकर्ता `.class`

टैग चयनकर्ता `标签名`

वाइल्डकार्ड चयनकर्ता `*`

विशेषता चयनकर्ता `[属性]`

छद्म वर्ग चयनकर्ता `:状态名`

सूचीषु छद्मवर्गचयनकर्तृणां उपयोगं कुर्वन्तु

सारणीषु छद्मवर्गचयनकर्तृणां उपयोगं कुर्वन्तु

छद्मवर्गचयनकस्य व्यावहारिकं उदाहरणम्

छद्म तत्व चयनकर्ता `::`

`::before` तथा`::after`

`::first-letter` आद्याक्षराणि

`::first-line` प्रथमा पङ्क्तिः

`::selection` क्षेत्रं चिन्वितुं मूषकं कर्षयन्तु

`::placeholder` पाठस्थानधारकः

सम्बन्ध चयनकर्ता

वंशज चयनकर्ता `>`

वंशज चयनकर्ता `空格`

भ्राता चयनकर्ता `~`

प्रतिवेशी भ्राता चयनकर्ता `+`

चौराहे चयनकर्ता

संघ चयनकर्ता `,`

व्यक्तिगत प्रोफाइल

मम सम्पर्कसूचना

प्रौद्योगिकी साझेदारी

आईडी चयनकर्ता #id

वर्ग चयनकर्ता .class

टैग चयनकर्ता 标签名

वाइल्डकार्ड चयनकर्ता *

विशेषता चयनकर्ता [属性]

छद्म वर्ग चयनकर्ता :状态名

सूचीषु छद्मवर्गचयनकर्तृणां उपयोगं कुर्वन्तु

सारणीषु छद्मवर्गचयनकर्तृणां उपयोगं कुर्वन्तु

छद्मवर्गचयनकस्य व्यावहारिकं उदाहरणम्

छद्म तत्व चयनकर्ता ::

::before तथा::after

::first-letter आद्याक्षराणि

::first-line प्रथमा पङ्क्तिः

::selection क्षेत्रं चिन्वितुं मूषकं कर्षयन्तु

::placeholder पाठस्थानधारकः

सम्बन्ध चयनकर्ता

वंशज चयनकर्ता >

वंशज चयनकर्ता 空格

भ्राता चयनकर्ता ~

प्रतिवेशी भ्राता चयनकर्ता +

चौराहे चयनकर्ता

संघ चयनकर्ता ,

व्यक्तिगत प्रोफाइल

मम सम्पर्कसूचना

आईडी चयनकर्ता `#id`

वर्ग चयनकर्ता `.class`

टैग चयनकर्ता `标签名`

वाइल्डकार्ड चयनकर्ता `*`

विशेषता चयनकर्ता `[属性]`

छद्म वर्ग चयनकर्ता `:状态名`

छद्म तत्व चयनकर्ता `::`

`::before` तथा`::after`

`::first-letter` आद्याक्षराणि

`::first-line` प्रथमा पङ्क्तिः

`::selection` क्षेत्रं चिन्वितुं मूषकं कर्षयन्तु

`::placeholder` पाठस्थानधारकः

वंशज चयनकर्ता `>`

वंशज चयनकर्ता `空格`

भ्राता चयनकर्ता `~`

प्रतिवेशी भ्राता चयनकर्ता `+`

संघ चयनकर्ता `,`