CSS အခြား

ပုံစံအား အကြောင်းအရာ

အော်စကာရီစကား ပုံစံအား အရာဝတ္တု အချက်အလက် အစပျိုင်း

ဥပမာ

  • အရာဝတ္တု အချက်အလက် အစပျိုင်း
  • အရာဝတ္တု အချက်အလက် အစပျိုင်း

ပုံစံ

ပုံစံအား အချက်အလက်

selector::pseudo-element {
  property: value;
}

::first-line ပုံစံ

::first-line ပုံစံအား အချက်အလက် ပေါင်းစပ်ပြီး စကားလုံး အစပျိုင်း

အောက်အရာ အား <p> အရာဝတ္တု အချက်အလက် အစပျိုင်း ပြင်ဆင်ပါ

အမှတ်

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

ကိုယ်တိုင် ကြိုးစားပါ

အကြောင်းအရာ::first-line ပုံစံအား ဗဟိုအဆင်း အရာ

အောက်အရာ အချက်အလက် ::first-line ပုံစံအား

  • စကားလုံး အချက်အလက်
  • အရေနံ အချက်အလက်
  • နောက်ခံ အချက်အလက်
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

အကြောင်းအရာနှစ်ခု အချက်အလက် - ::first-line နှစ်ခု အပြောင်း :first-line

အော်စကာရီအက်စ် 3 တွင် ပုံစံအား အသုံးပြု ပါပုံစံအားနှင့်ပုံစံအားအကြောင်းအရာ

အော်စကာရီအက်စ် 2 နှင့် အော်စကာရီအက်စ် 1 တွင် ပုံစံအား ပုံစံအား အသုံးပြု ပါ

နောက်ထပ် ကိုယ်စားပြု အတွက် အော်စကာရီအက်စ် 2 နှင့် အော်စကာရီအက်စ် 1 ပုံစံအား အသုံးပြု ပါ

::first-letter ပုံစံ

::first-letter ပုံစံအား အချက်အလက် ပေါင်းစပ်ပြီး စကားလုံး အစပျိုင်း

အောက်အရာ အား <p> အရာဝတ္တု အချက်အလက် အစပျိုင်း ပြင်ဆင်ပါ

အမှတ်

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

ကိုယ်တိုင် ကြိုးစားပါ

အကြောင်းအရာ::first-letter ပုံစံအား ဗဟိုအဆင်း အရာ

အထူး အာရုံကြည်း ::first-letter ပုံစံ

  • စကားလုံး အချက်အလက်
  • အရေနံ အချက်အလက်
  • နောက်ခံ အချက်အလက်
  • အပြင် အကျယ်ဝန်း
  • အတွင်း အကျယ်ဝန်း
  • နယ်ခြား အချက်အလက်
  • text-decoration
  • vertical-align（仅当 "float" 为 "none"）
  • text-transform
  • line-height
  • float
  • clear

伪元素和 CSS 类

伪元素可以与 CSS 类结合使用：

အမှတ်

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

ကိုယ်တိုင် ကြိုးစားပါ

上面的例子将以红色和较大的字体显示 class="intro" 的段落的首字母。

အချို့ ပြောင်းလဲအရာများ

အချို့ ပြောင်းလဲအရာများ ပေါင်းစပ်ပါကြောင်း အသုံးပြုပါ。

အောက်အရာတွင် ပုဒ်စု၏ ပထမလက်ဖွားအရာအား အရောင်အသား ကျွန်းပြား ပြောင်းလဲပါကြောင်း ပြထားပါ။ ပထမလက်ဖွားအရာတွင် အရောင်အသား အသင်းအပျက် အရောင်အသား အသင်းအပျက် ပြောင်းလဲပါကြောင်း ပြထားပါ။ ပုဒ်စု၏ အခြားအရာအား အရောင်အသား အသင်းအပျက် အရောင်အသား အသင်းအပျက် ပြောင်းလဲပါကြောင်း ပြထားပါ။

အမှတ်

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

ကိုယ်တိုင် ကြိုးစားပါ

CSS - ::before ပြောင်းလဲအရာအား

::before ပြောင်းလဲအရာအား အရာအား အစားထိုးပိုင်းတွင် ထည့်သွင်းပါကြောင်း အသုံးပြုပါ。

အောက်အရာတွင် ရွေးချယ်ထားသော <h1> အရာတခု၏ အရာအား အစားထိုးပိုင်းတွင် ပုံများ ထည့်သွင်းပါ။

အမှတ်

h1::before {
  content: url(smiley.gif);
}

ကိုယ်တိုင် ကြိုးစားပါ

CSS - ::after ပြောင်းလဲအရာအား

::after ပြောင်းလဲအရာအား အရာအား ပြီးပိုင်းတွင် ထည့်သွင်းပါကြောင်း အသုံးပြုပါ。

အောက်အရာတွင် ရွေးချယ်ထားသော <h1> အရာတခု၏ အရာအား ပြီးပိုင်းတွင် ပုံများ ထည့်သွင်းပါ။

အမှတ်

h1::after {
  content: url(smiley.gif);
}

ကိုယ်တိုင် ကြိုးစားပါ

CSS - ::selection ပြောင်းလဲအရာအား

::selection ပြောင်းလဲအရာအား အသုံးပြုသော ပြောင်းလဲအရာတခု၏ အစိတ်အပိုင်းအား အသုံးပြုပါ。

အောက်အရာတွင် အသုံးပြုနိုင်သော CSS အခွင့်အရေးအား ::selection:

  • color
  • background
  • cursor
  • outline

အောက်အရာတွင် ရွေးချယ်ထားသော စကားလုံးများ အရောင်အသား အသင်းအပျက် အရောင်အသား ကျွန်းပြား ပြောင်းလဲပါကြောင်း ပြထားပါ။

အမှတ်

::selection {
  color: red; 
  background: yellow;
}

ကိုယ်တိုင် ကြိုးစားပါ

အားလုံး CSS ပုံစံ ပြောင်းလဲအရာအား

ရှာဖွေသူ အမှတ်အသုံးပြုခြင်း အမှတ်အသုံးပြုခြင်း ဖော်ပြ
::after p::after ရွေးချယ် <p> အရာတခု၏ အခြားအရာအား နောက်သို့ ထည့်သွင်းပါ。
::before p::before ရွေးချယ် <p> အရာတခု၏ အခြားအရာအား ထိပ်သို့ ထည့်သွင်းပါ。
::first-letter p::first-letter ရွေးချယ် <p> အရာတခု၏ ပထမလက်ဖွားအရာအား。
::first-line p::first-line ရွေးချယ် <p> အရာတခု၏ ပထမလက်ဖွားအရာအား。
::selection p::selection အသုံးပြုသူက ရွေးချယ်ထားသော အချက်အလက်အစိတ်အပိုင်းကို ရယူပါ。

အဆိုပါ CSS ပြုပြင်ချက်

ရှာဖွေသူ အမှတ်အသုံးပြုခြင်း အမှတ်အသုံးပြုခြင်း ဖော်ပြ
:active a:active အချက်အလက်များအား လက်ရှိအခြေအနေအား ရယူပါ。
:checked input:checked အချက်အလက်များအား ရွေးချယ်ထားသော အဖွဲ့အစုအား ရယူပါ。
:disabled input:disabled အချက်အလက်များအား အသုံးမပြုသော အဖွဲ့အစုအား ရယူပါ。
:empty p:empty အဖွဲ့အစုများအား အပိုင်းအချက်မရှိသော အဖွဲ့အစုအား ရယူပါ。
:enabled input:enabled အချက်အလက်များအား အသုံးပြုခွင့်ရသော အဖွဲ့အစုအား ရယူပါ。
:first-child p:first-child အဖွဲ့အစုများအား အဖွဲ့အစုမှ အပြီးအပိုင်းအဖွဲ့အစုကို ရယူပါ。
:first-of-type p:first-of-type အဖွဲ့အစုများအား အဖွဲ့အစုမှ အပြီးအပိုင်းအဖွဲ့အစုကို ရယူပါ。
:focus input:focus ချိန်ချိန်ချိန်အား ပြန်လည်ရယူပါ。
:hover a:hover ချိန်ချိန်ချိန်အား အပူဇော်များအား အပူဇော်အား ရယူပါ。
:in-range input:in-range အရာဝတ္တုများအား အမှတ်အကိုးးမှ အမှတ်အကိုးးအထိ အကိုးးအချုပ်ကို ရယူပါ。
:invalid input:invalid အရာဝတ္တုများအား မမှန်ကန်သော အကိုးးအချုပ်ကို ရယူပါ。
:lang(language) p:lang(it) lang အကိုးးအချုပ် "it" မှ စတင်သော အချက်အလက် <p> အဖွဲ့အစုကို ရယူပါ。
:last-child p:last-child အဖွဲ့အစုများအား အဖွဲ့အစုမှ နောက်ဆုံးအပိုင်းဖြစ်သော အဖွဲ့အစုအား ရယူပါ。
:last-of-type p:last-of-type အဖွဲ့အစုများအား အဖွဲ့အစုမှ နောက်ဆုံးအပိုင်းဖြစ်သော <p> အဖွဲ့အစုကို ရယူပါ。
:link a:link အချက်အလက်မရှိသော ချိန်ချိန်ချိန်များကို ရယူပါ。
:not(selector) :not(p) အဖွဲ့အစုများအား အချက်အလက် <p> အဖွဲ့အစုကဲ့သို့ မပါဘဲသော အဖွဲ့အစုအား ရယူပါ。
:nth-child(n) p: nth-child(2) အဖွဲ့အစုများအား အဖွဲ့အစုမှ နောက်ဆုံးအပိုင်းဖြစ်သော အချက်အလက် <p> အဖွဲ့အစုကို ရယူပါ。
:nth-last-child(n) p: nth-last-child(2) အဖွဲ့အစုများအား နောက်ဆုံးအဖွဲ့အစုမှ နောက်ဆုံးအပိုင်းဖြစ်သော အချက်အလက် <p> အဖွဲ့အစုကို ရယူပါ。
:nth-last-of-type(n) p: nth-last-of-type(2) 选择作为父的第二个

元素的每个

元素，从最后一个子元素计数
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个

元素的每个

元素。
:only-of-type p:only-of-type 选择作为其父的唯一

元素的每个

元素。
:only-child p:only-child 选择作为其父的唯一子元素的

元素。
:optional input:optional 选择不带 "required" 属性的 元素。
:out-of-range input:out-of-range အခြေခံ အကိုင်း ဖြည့်စွက်ထားသော <input> အသုံးပ�ုခြင်း အတွက် ယူဆယ်ရှာဖွေက်လိပ်
:read-only input:read-only readonly အကိုင်း ဖြည့်စွက်ထားသော <input> အသုံးပ�ုခြင်း အတွက် ယူဆယ်ရှာဖွေက်လိပ်
:read-write input:read-write readonly အကိုင်း ဖြည့်စွက်ထားသော <input> အသုံးပ�ုခြင်း အတွက် ယူဆယ်ရှာဖွေက်လိပ်
:required input:required required အကိုင်း ဖြည့်စွက်ထားသော <input> အသုံးပ�ုခြင်း အတွက် ယူဆယ်ရှာဖွေက်လိပ်
:root root အကြောင်းကြောင်း အသုံးပ�ုခြင်း အတွက် ယူဆယ်ရှာဖွေက်လိပ်
:target #news:target အခြေခံ အလိပ် #news အသုံးပ�ုခြင်း အတွက် ယူဆယ်ရှာဖွေက်လိပ်
:valid input:valid အခြေခံ ဖြည့်စွက်ချက် <input> အသုံးပြုခြင်း အတွက် ယူဆယ်ရှာဖွေက်လိပ်
:visited a:visited ခွင့်ပြုထားသော အစီအစဉ် လိပ်များ ကို ယူဆယ်ရှာဖွေက်လိပ်