CSS3 تاللىغۇچلىرى ھەققىدە بايان

CSS3 تاللىغۇچ پارىڭى
بەلكىم سىز ئاساسىي Id,classبىلەن descendant تاللىغۇچنى بىلشىڭىز مۇمكىن، ھەمدە دائىم ئۇنى چاقىرىپ ئىشلىتىمىز، ئەگەر بۇنداق بولسا، ئەمسە سىز جانلىقلىق بولغان چوڭ تاللىغۇچنى قولدىن بېرىپ قويغان بولىسىز. بۇ تېمدا تىلغا ئېلىنىدىغان كۆپ قىسىم تاللىغۇچ بولسا CSS3 ئۆلچەمدە  .شۇڭا ئۇلار ماس بولغان ئەڭ يېڭى نەشرىدىكى تور كۆرگۈچىلەردە ئۈنۈمى بولىدۇ، شۇڭا بۇلارنى پىششىق ئىگەللىۋېلىڭ.
1.*
بىز يۇقىرى دەرىجىدىكى تاللىغۇچىنى كۆرۈشتىن بۇرۇن، ئاۋۋال ھەممىگە تونۇشلۇق بولغان تازىلاش تاللىغۇچنى كۆرۈپ ئۆتەيلى. يۇلتۇز بەلگىسى بولسا بەت يۈزىدىكى ھەربىر ئېلېمېنتلارتاللىنىدۇ. نۇرغۇن ئاچقۇچىلار ئۇ ئارقىلىقmarginبىلەنpadding تازىلايدۇ. ئەلۋەتتە سىز مەشىق قىلغان ۋاقىتتا ئىشلەتسىڭىزمۇ بولىدۇ ،ئەمما ئىشلەپ چىقىرىش مۇھىتىدا ئىشلىتىشڭىزنى تەۋسىيە قىلمايمەن، ئۇ تور كۆرگۈچىگە نۇرغۇنلىغان ھاجىتى بولمىغان نەرسىلەرنى قېتىپ قويىدۇ  .
*ئارقىلىق مەلۇم بىر ئېلېمېنتنىڭ بارلىق قىسمىي ئېلېمېنتلىرىنى تاللىغىلىمۇ بولىدۇ.
* {
  margin: 0;
  padding: 0;
}

ئۇ #container ئاستىدىكى بارلىق ئېلېمېنتنى تاللايدۇ، ئەلۋەتتە مەن سىزنىڭ بۇنى ئىشلىتشڭىزنى تەۋسيە قىلمايمەن.
سىغىشىشچانلىقى

IE6+
Firefox
Chrome
Safari
Opera

#X.2
تاللىغۇچنىڭ ئىچىدە # بەلگىسىنى ئىشلىتىش ئارقىلىق ID سەپلەنگەن ئېلېمېنتنى نىشانلىغىلى بولىدۇ. ئادەتتە كۆپچىلىك مۇشۇنداق ئۇسۇلدا ئىشلىتىدۇ، ئىشلەتكەن ۋاقىتتا كۆپچىلىك يەنىلا دىققەت قىلمىساڭلار بولمايدۇ.
ئۆزىڭىزدىن سوراپ بېقىڭ: مەن بۇ ئېلېمېنتقا ID سەپلەپ ئۇنى نىشانلىشىمنىڭ ھاجىتى بارمۇ- يوق؟
تاللىغۇچى ناھايىتى تەلەپچان ھەمدە ئۇنى ئىشلىتىشكە ئامال يوق، ئەگەر بار دېيىلسە، ئاۋۋال خەتكۈش نامىنى ئىشلىتىش،HTML5 ئىچىدىكى يېڭى ئېلېمېنت، ياكى ساختا ئېلېمېنت.
سىغىشىشچانلىقى
IE6+
Firefox
Chrome
Safari
Opera

.X.3
.error {
  color: red;
}

بۇ  بىر كىلاس تاللىغۇچ، ئۇنىڭ ID تاللىغۇچ بىلەن ئوخشىمايدىغان يېرى بولسا ، ئۇ كۆپ ئېلېمېنتنى نىشانلىيالايدۇ. سىز كۆپلىگەن  ئېلېمېنتقا قارىتابېزەش ئېلىپ بارماقچى بولسىڭىز class نى ئىشلەتسىڭىز بولىدۇ، سىز مەلۇم بىر ئېلېمېنتقا تۈزەش  ئىلىپ بارماقچى بولسىڭىز Id نى ئىشلەتسىڭىز بولىدۇ،
سىغىشىشچانلىقى
  IE6+
Firefox
  Chrome
Safari
Opera

X Y.4
li a {
  text-decoration: none;
}

كېيىنكىسى بولسا دائىم ئىشلىتىدىغان descendant تاللىغۇچ. ئەگەر سىز تېخىمۇ كونكرېتنى ئۇسۇل ئارقىلىق  ئېلېمېنتىقا ئورۇن بەلگىلىمەكچى بولسىڭىز،سىز مۇشۇنى ئىشلەتسىڭىز بولىدۇ. مەسىلەن سىز بارلىق a خەتكۈشىنى نىشانلىشىڭىزنىڭ ھاجىتى يوق، بەلكى li خەتكۈشى ئىچىدىكى a خەتكۈشىنى نىشانلىماقچى بولسىڭىز، بۇ ۋاقىتتا سىز descendant تاللىغۇچىنى ئىشلەتسىڭىز بولىدۇ.
كەسپىي ئەسكەرتىش: ئەگەر سىز تالغان تاللىغۇچ  X Y Z A B.eero مۇشۇنداق بولسا، ئەمسە سىز خاتالاشقان بولىسىز. ھەر ۋاقىت ئۆزىڭىزنى ئەسكەرتىپ تۇرۇڭ ،راستتىنلا نۇرغۇن ئېلېمېنتىقا تۈزەش ئىلىپ بارامسىز.
سىغىشىشچانلىقى
IE6+
      Firefox
      Chrome
      Safari
      Opera

X.5
a { color: red; }
ul { margin-left: 0; }

ئەگەر سىز بەت ئۈستىدىكى بارلىق خەتكۈش ئىچىدىكى مەلۇم بىر خەتكۈشنى نىشانلىماقچى بولسىڭىز، id ياكى class ئارقىلىق ئەمەس بەلكى ئۇلارنىڭ تىپىغا ئاساسلىنىسىز. سىز بىۋاستە تىپ تاللىغۇچنى ئىشلەتسىڭىزلا بولىدۇ. ئەگەر بارلىق تەرتىپسىز تىزىملىكنى نىشانلىماقچى بولسىڭىز، ئۇنداق ul{} نى ئىشلەتسىڭىز بولىدۇ.
سىغىشىشچانلىقى
   IE6+
      Firefox
      Chrome
   Safari
      Opera
  X:visited.6ۋە  X:link
a:link {color:red;}
a:visited {color: purple;}
بىز :link ساختا ئېلېمېنتنى ئىشلىتىش ئارقىلىق تىخى زىيارەت قىلىنىپ باقمىغان ئۇلىنشلارنى نىشانلىيالايمىز، ئۇنىڭدىن باشقا :visited ئارقىلىق بارلىق زىيارەت قىلىنىپ بولغان ئۇلىنىشلارنى نىشانلىيالايمىز.
سىغىشىشچانلىقى
IE7+
   Firefox
      Chrome
      Safari
      Opera
X+Y.7

ul + p {
color: red;
}

بۇ بولسا قوشنا تاللىغۇچى.ئۇ پەقەت ئالدىدىكى ئېلېمېنتقا ئەڭ يېقىن بولغان ئېلېمېنتنى تاللايدۇ. بۇنداق ئەھۋالدا، پەقەت بىرىنجى ئابزاستىن كېيىنكى ھەربىر ul قىزىل رەڭلىك تېكىستى بولىدۇ.
سىغىشىشچانلىقى
IE6+
      Firefox
   Chrome
   Safari
   Opera
X>Y.8

div#container > ul {
  border: 1px solid black;
}

ئۆلچەملىك x y بىلەن x>y نىڭ پەرقى بولسا ، كېيىنكىسى پەقەت بىۋاستە قىسمىي ئېلېمېنتنىلا تاللايدۇ. تۆۋەندە مىسال كۆرۈپ باقايلى

List Item
- Child

List Item

List Item

List Item

#Container>ul تاللىغۇچ پەقەت id سى container بولغان div ئاستىدىكى بارلىق بىۋاستە ul ئېلېمېنتلىرىنى تاللايدۇ. مەسىلەن ئۇ ھەرگىزمۇ بىرىنجى ul ئاستىدكى ul ئېلېمېنتىنى نىشانلىمايدۇ.
مەلۇم بىر سەۋەبلەر تۈپەيلىدىن، قىسمىي ئېلېمېنت تاللىغۇچنى ئىشلىتىش ئىقتىدار جەھەتتىن نۇرغۇن ئەۋزەللىكلىرى بار. ئەمەلىيەتتە، Javascript دا css تاللغۇچىنى ئىشلەتكەندە، مۇشۇنداق ئىشلىتىش كۈچلۈك تەۋسىيە قىلىنىدۇ.
ماسلىشىشچانلىق
      IE6+
      Firefox
      Chrome
   Safari
      Opera

X~Y.9
ul ~ p {
  color: red;
}

گۇرۇپپىلاپ تاللىغۇچ x+y ناھايىتى ئوخشىشىپ كېتىدۇ، ئۇنىڭ ئۈستىگە ئۇنچە قاتتىق تەلەپلىك ئەمەس. ul+p تاللىغۇچنى پەقەت كۆرسىتىلگەن ئېلېمېنتقا يېقىن تۇرىدىغان ئېلېمېنتلارنى نىشانلايدۇ. ئەمما بۇ تاللىغۇچ نىشان تاللىغۇچ كەينىدىكى بارلىق ماس كەلگەن ئېلېمېنتنى نىشانلايدۇ.
سىغىشىشچانلىقى
IE7+
   Firefox
   Chrome
      Safari
      Opera
X[title].10
a[title] {
  color: green;
}

بۇ خاسلىق تاللىغۇچ دېيلىدۇ. ئۈستىدىكى مىسالدا،  پەقەت title خاسلىقى بولغان ئېلېمېنتلا تاللىنىدۇ. بۇنداق خاسلىقى يوق a خەتكۈشىگە بۇ خىل كود ئاقمايدۇ. ئۇنداقتا ئويلاپ بېقىڭ ئەگەر تېخىمۇ كونكىرېتنى تاللاش لازىم بولۇپ قالسىچۇ؟
سىغىشىشچانلىقى
IE7+
      Firefox
      Chrome
      Safari
      Opera

X[href="foo"].11
a[href="#"] {
  color: #1f6053; /* nettuts green */
}

ئۈستىدىكى بۇ بۆلەك كود href خاسلىقى http://mouse.com بولغان a خەتكۈشنى يېشىل رەڭدە قىلىدۇ، باشقا ئېلېمېنتلار تەسىرگە ئۇچرىمايدۇ.
ئەسكەرتىش: بىز قىممەت قوش پەش ئارقىلىق ئورالغان بولساق، ئۇنداقتا javascript دە ئىشلىتىلگەن ۋاقىتتىمۇ قوش پەش ئارقىلىق ئورىلىدۇ، ئىمكانقەدەر ئۆلچەملىك CSS3 تاللىغۇچىنى ئىشلىتىشىڭىز تەۋسىيە قىلىنىدۇ.
مۇشۇنداق ئىشلىتىشكىقۇ بولدى، ئەمما سەل ئۆلۈك. ئەگەر بۇ ئۇلىنىش بولماي، باشقا ئوخشىشىپ كېتىدىغان ئۇلىنىش بولسا ئۇنداقتا تەھقىقلەش ئىپادىسى ئىشلىتىلىدۇ.
سىغىشىشچانلىقى
IE7+
      Firefox
      Chrome
      Safari
      Opera
X[href*="mouse"].12
a[href*="strongme"] {
  color: #1f6053;
}

ئەمدى كېلەيلى، بۇ دەل بىزگە لازىم بولغان نەرسە. بۇ ئارقىلىق mouse بۇ قىممەت چوقۇم a خەتكۈشىدە كۆرۈلۈشى كېرەك، دەپ بېكىتىلدى. مەيلى mouse.cn ياكى mouse.com ۋەياكى www. mouse.cn بولسۇن ھەممىسى نىشانلىنىدۇ.
بېراق ئېسىڭىزدە بولسۇن بىر كەڭرى جۈملە. ئەگەر a خەتكۈشى كۆرسەتكىنى mouse قا مۇناسىۋەتلىك بېكەت بولمىسا، ئەگەر تېخىمۇ كونكىرېتنى چەكلەش كېرەك بولسا، ئۇنداقتا ^ ۋە $ نى ئىشلىتىش كېرەك، ئايرىم- ئايرىم ھالدا ھەرپ- بەلگىنىڭ باشلىنىش ۋە ئاخىرلىشىنى كۆرسىتىدۇ.
سىغىشىشچانلىقى
IE7+
   Firefox
      Chrome
      Safari
      Opera
X[href^="href"].13

a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}

كۆپچىلىك چوقۇم بەزى بېكەتلەرنىڭ a خەتكۈشى يېنىدا بىر سىرتقى ئۇلانما رەسىمى بولىدىغانلىقىغا دىققەت قىلغان بولۇشى مۇمكىن. مەنمۇ ھەم دوستلار چوقۇم مۇشۇنداق ئەھۋالغا ئۇچرىغان دەپ ئويلايمەن. بۇنداق لايىھە ئېنىقلا سىزگە باشقا بىر بېكەتكە سەكرىگىلى بولىدىغانلىقىنى بىلدۈرىدۇ.
Carat بەلگىسى ئارقىلىق بۇنى ناھايىتى ئاسانلا قىلغىلى بولىدۇ. ئۇ ئادەتتە تەھقىقلەش ئىپادىسىدە ھەرپ- بەلگىنىڭ باشلىنىشى سۈپىتىدە ئىشلىتىلىدۇ.ئەگەر بىز href خاسلىقى http بىلەن باشلانغان بارلىق a خەكۈشىنى نىشانلىماقچى بولساق، ئۇنداقتا ئۈستىدىكىگە ئوخشايدىغان كود ئارقىلىق ئەمەلگە ئاشۇرالايمىز.
دىققەت: بىز http:// نى ئىزدىمەيمىز، ئۇنىڭ ھاجىتى يوق، چۈنكى بۇ https:// نى ئۆز ئىچىگە ئالمايدۇ.
ئۇنداقتا ئەگەر بارلىق بىر رەسىمنى كۆرسەتكەن a خەتكۈشىنى ئىزدىمەكچى بولساقچۇ؟ بۇنداق ئەھۋالدا بىز ھەرپ- بەلگىنىڭ ئاخىرىنى ئىزدىسەك بولىدۇ.
سىغىشىشچانلىقى
  IE7+
      Firefox
      Chrome
      Safari
      Opera

X[href$=".jpg"].14
a[href$=".jpg"] {
  color: red;
}

بۇ قېتىم بىز تەھقىقلەش ئىپادىسى بەلگىسى $ نى ئىشلىتىپ ھەرپ- بەلگە تىزمىسىنىڭ ئاخىرىنى كۆرسەتتۇق. بۇ بۆلەك كودنىڭ مەنىسى بولسا بارلىق رەسىم ئۇلىنىشلىرىنى ئىزدىسۇن، دېگەنلىك، ياكى ھېچ بولمىغاندا .jpg بىلەن ئاخىرلاشقان بىر url نى ئىزدىسۇن دېگەنلىك بولىدۇ.
سىغىشىشچانلىقى
IE7+
   Firefox
      Chrome
      Safari
   Opera

X[data-*="foo"].15
a[data-filetype="image"] {
color: red;
}

سەككىزىنجى بۆلەككە قايتساق، بىز قانداق قىلىپ بارلىق رەسىم تىپىدىكىلەرنى تاللىيالايمىز، png,jpeg,jpg,gif ؟ بىز كۆپ تاللىغۇچنى ئىشلەتسەك بولىدۇ. ئاستىغا قاراڭ.
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}

ئەمما بۇنداق يېزىش بەكلا قالاقلىق، ئۈنۈمىمۇ ھەم بەك تۆۋەن بولىدۇ. باشقا بىر ھەل قىلىش چارىسى بولسا ئىختىيارى خاسلىق ئىشلىتىش.بىز ھەربىر a خەتكۈشىگە data-filetype خاسلىقىنى بېرىپ، مۇشۇ ئۇلانما كۆرسەتكەن رەسىم تىپىنى كۆرسەتسەك بولىدۇ.
Image Link

بۇ قارماق بولغاندىن كېيىن، بىز ئۆلچەملىك ئۇسۇل ئارقىلىق ھۆججەت تىپى image بولغان a خەتكۈشىنى تاللىيالايمىز.
a[data-filetype="image"] {
color: red;
}

سىغىشىشچانلىقى
IE7+
      Firefox
      Chrome
      Safari
      Opera

X[foo~="bar"].16
a[data-info~="external"] {
color: red;
}

a[data-info~="image"] {
border: 1px solid black;
}

بۇ يەردە دوستلىرىڭىزنى ھەيران قالدۇرىدىغان بىر نەرسە بار. بۇ ھۈنەرنى جىق ئادەم بىلىپ كەتمەيدۇ. بۇ ~ بەلگە بولسا مەلۇم خاسلىقى بوشلۇق بىلەن ئايرىلغان كۆپ قىممەتلىك خەتكۈشنى نىشانلىيالايدۇ.
ھېلىقى 15 مىسالغا كەلسەك، بىر data-info خاسلىقى سەپلەپ، بىزگە لازىملىق بولغان خالىغان بوشلۇق بىلەن ئايرىلغان قىممەتنى قوبۇل قىلالايدۇ.بۇ مىسال ئۈچۈن سىرتقى ئۇلانما ۋە سىرتقى رەسىم ئۇلانمىسىنى كۆرسىتىپ ئۆتىمىز.
Click Me, Fool

بۇ ئېلېمېنتلارغا كود يېزىلغاندىن كېيىن، بىز ~ نى ئىشلىتىش ئارقىلىق ئۇلارنى تاپالايمىز.
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

17. X:checked
input[type=radio]:checked {
border: 1px solid black;
}

بۇ ساختا كىلاس تاللانغان تاق تاللاش ۋە كۆپ تاللاش رامكىلىرىنى نىشانلىيالايدۇ، مۇشۇنداقلا ئاددىي.
سىغىشىشچانلىقى
IE9+
      Firefox
      Chrome
      Safari
   Opera

X:after.18
Before ۋە after ئىككىسى ساختا كىلاس. دائىم، كىشىلەر بىر يېڭى ۋە ئىجادىي ئۇسۇلنى ئىزدەپ ئۇنى ئۈنۈملۈك ئىشلىتىدىغاندەك كۆرۈنىدۇ. ئۇ تاللانغان خەتكۈش ئەتراپىدا مەزمۇن ھاسىل قىلىدۇ.
.clearfix نى ئىشلەتكەن ۋاقىتتا نۇرغۇنلىغان خاسلىق تۇنجى بولۇپ ئۇنىڭ ئىچىگە يېزىلىدۇ.
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
  }
.clearfix {
*display: inline-block;
_height: 1%;
}

ئۈستىدىكى كود نىشان خەتكۈشىدە بىر بۆلەك بوشلۇق تولۇقلايدۇ، ئاندىن ئۇنى تازلىۋېتىدۇ.بۇ ئۇسۇل قالتىس بولۇپ ئۇنى ئوبدان ئىگەللىۋېلىڭ. بولۇپمۇ overflow:hidden ئۇسۇلى كارغا كەلمىگەندە، ئۈستىدىكى ئۇسۇل ئۇنى ھەل قىلالايدۇ.
ئۇنىڭدىن باشقا ئىجادىي ئىشلىتىشلەرنى كۆرمەكچى بولسىڭىز، بۇ يەرنى بېسىڭ.
CSS3 ئۆلچىمىگە ئاساسلانغاندا، ئىككى قوش چېكىت ئشلىتىشكە بولىدۇ. ئاندىن سىغىشىشچانلىقىنى كۆزدە تۇتۇپ تور كۆرگۈچلەرمۇ تاق قوش چېكىت ئىشلىتىشنى قوللايدۇ. ئەمەلىيەتتە، بۇنداق ئەھۋال ئاستىدا تاق قوش چېكىش ئىشلىتىش بىرقەدەر ئاقىلانىلىك.
سىغىشىشچانلىقى
IE8+
      Firefox
      Chrome
      Safari
      Opera

X::hover.19
div:hover {
  background: #e3e3e3;
}

كۆپچىلىك بۇنى چوقۇم بىلىدۇ. ئورگان تەرەپنىڭ چۈشەندۈرىشىچە user action pseudo class، ئاڭلىماققا سەل مۈجمەلرەك، ئەمەلىيەتتە ئۇنداقمۇ ئەمەس. ئەگەر مائۇس ئىستىرىلكىسى سىيپاپ ئۆتكەن دائىرىدە باشقىچىرەك ئۇسلۇپ بەرمەكچى بولغاندا، دەل مۇشۇ ساختا ئېلېمېنت ئەس قاتىدۇ.
ئەسكەرتىش:كونا نەشىردىكى IE دا پەقەت a خەتكۈشى ئۈستىدە سىيپات ئۆتۈلگەندەك :hover رولىنى كۆرسىتىدۇ.
ئادەتتە ئۇلانمىنى مائۇس سىيپاپ ئۆتكەندە ئاستىدا قىر بېرىش ئۈچۈن بۇ ساختا كىلاس ئىشلىتىلىدۇ.
a:hover {
border-bottom: 1px solid black;
}

كەسپىي ئەسكەرتىش:border-bottom:1px solid black بولسا text-decoration:underline; قارىغاندا ياخشى كۆرۈنىدۇ.
سىغىشىشچانلىقى
      IE6+(دا پەقەت ئۇلانما خەتكۈشىدىلا رولى بار)
      Firefox
      Chrome
   Safari
   Opera

X:not(selector).20
div:not(#container) {
color: blue;
}

بۇ Nagetion ساختا كىلاس بەكلا قولايلىق، بىزگە id سى container بولغاندىن باشقا بارلىق div خەتكۈشلىرىنى تاللاش لازىم بولۇپ قالدى، دەپ پەرەز قىلايلى. ئۇنداق ئۈستىدىكى كود دەل مۇشۇنى ھەل قىلىدۇ.
ياكى ئابزاس خەتكۈچىدىن باشقا بارلىق خەتكۈشلەرنى تاللىماقچى دەيلى
*:not(p) {
  color: green;
}

سىغىشىشچانلىقى
  IE9+
      Firefox
      Chrome
   Safari
   Opera
X::pseudoElement.21
p::first-line {
  font-weight: bold;
  font-size:1.2em;
}

:: نى ئىشلىتىش ئارقىلىق خەتكۈشنىڭ بىرقىسىم مەزمۇنىنى تاللىغىلى بولىدۇ، ئەگەر بىرىنجى قۇر، ياكى بىرىنجى ھەرپ دېگەندەك. لېكىن چوقۇم توسۇق(Block) دەرىجىسىدىكى خەتكۈشلەردە ئىشلەتكەندە ئاندىن ئۈنۈمى كۆرۈلىدۇ.
ساختا خەتكۈش ئىككى دانە قوش چېكىتتىن تۈزۈلىدۇ.

بىرىنجى ھەرپنى نىشانلاش
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}

ئۈستىدىكى كود بولسا بەتتىكى بارلىق پاراگراف خەتكۈشىنى ئىزدەيدۇ، ھەمدە ھەربىر پاراگرافنىڭ بىرىنجى ھەرپىنى كۆرسىتىدۇ.
ئۇ دائىم گېزت-ژورناللاردىكى مەزمۇننى نۇقتىلىق گەۋدىلەندۈرۈشتە ئىشلىتىلىدۇ.
ئابزاسنىڭ بىرىنجى قۇرىنى نىشانلاش
p::first-line {
font-weight: bold;
font-size: 1.2em;
}

::first-line بىلەن ئوخشايدۇ، ئابزاسنىڭ بىرىنجى قۇرىنى تاللايدۇ.
بار بولغان قەۋەتلەنگەن ئۇسلۈب قەغىزى بىلەن سىغىشىشچانلىقىنى ساقلاش ئۈچۈن، ئىلگىرىكى كونا توركۆرچلەرمۇ تاق قوش چېكىتلىك يېزىلىشنى قوللايدۇ، مەسىلەن، first-line,:first-letter,:before,;after. ئەمما بۇ سىغىشىشچانلىق يېڭىدىن تونۇشتۇرۇلغان ئالاھىدىلىككە كار قىلمايدۇ.
سىغىشىشچانلىقى
  IE6+
   Firefox
   Chrome
   Safari
      Opera
X:nth-child(n).22
li:nth-child(3) {
color: red;
}

دۆۋە (Stack) لىق خەتكۈشنىڭ كۆرسىتىلگەن ئېلېمېنتنى قانداق ئېلىشتا ئامالسىز قالغان ۋاقتىڭىز ئېسىڭىزدىمۇ؟ nth-child بولغان كۈندىن باشلاپ ئۇ كۈنلەر كەلمەسكە كەتتى.
دىققەت قىلىڭكى nth-child بىر پۈتۈن سانلىق پارامېتىر قوبۇل قىلىدۇ، ئاندىن ئۇ نۆلدىن باشلانمايدۇ.ئەگەر سىز ئىككىنجى ئېلېمېنتقا ئېرىشمەكچى بولسىڭىز ئۇنداقتا li:nth-child(2) دېگەن قىممەتنى يوللىسىڭىز بولىدۇ.
بىز ھەتتا ئۆزگەرگۈچى مىقدارنىڭ نامى ئارقىلىق ئېنىقلانغان قىسمى خەتكۈشلەرگىمۇ ئېرىشەلەيمىز. مەسىلەن، li:nth-child(4n) ئارقىلىق ھەر تۆت ئېلېمېنت ئارلىقىدا بىرقېتىم خەتكۈشكە ئېرىشەلەيمىز.
سىغىشىشچانلىقى
IE9+
      Firefox3.5+
      Chrome
      Safari
X:nth-last-child(n).23
li:nth-last-child(2) {
color: red;
}

سىز بىر ul خەتكۈشىگە N دانە  كۆپ ئېلېمېنت سەپلىدىڭىز دەپ پەرەز قىلايلى، ئەمدى سىز ئەڭ ئاخىرقى ئۈچ ئېلېمېنتقا ئېرىشمەكچى، ھەتتا بۇنداق بولسىمۇ
li:nth-child(397)، سىز nth-last-child ساختا كىلاس ئارقىلىق ئۇنىڭ ئورنىغا ئالماشتۇرۇپ ئىشلەتسىڭىز بولىدۇ.
سىغىشىشچانلىقى
   IE9+
   Firefox3.5+
   Chrome
   Safari
   Opera

X:nth-of-type(n).24
ul:nth-of-type(3) {
border: 1px solid black;
}

شۇنداق ۋاقىتلار بولۇپ قالىدۇ، بىر قىسمىي ئېلېمېنتنى تاللاش ئەمەس، بەلكى ئېلېمېنتنىڭ تىپىغا ئاساسەن تاللاش ئېلىپ بېرىلىدۇ.
ئويلاپ باقايلى 5 دانە ul خەتكۈشى بولسۇن. ئەگەر سىز ئۇلارنىڭ ئىچىدىكى ئۈچىنجىسىگە قارىتا بىزىش ئېلىپ بارماقچى بولسىڭىز، ھەمدە سىزنىڭ id خاسلىقىنى ئىشلەتكۈڭىز يوق. ئۇنداقتا سىز nth-of-type(n) ساختا كىلاس ئارقىلىق ھەل قىلسىڭىز بولىدۇ. ئۈستىدكى كودتا، پەقەت ئۈچىنجى ul خەتكۈشىگە قىر سەپلىنىدۇ.
سىغىشىشچانلىقى
      IE9+
      Firefox3.5+
   Chrome
   Safari

X:nth-last-of-type(n).25
ul:nth-last-of-type(3) {
border: 1px solid black;
}

ئوخشاشلا، بىردەكلىكنى ساقلاش ئۈچۈن nth-last-of-type نى ئىشلىتىش ئارقىلىق ئېرىشلگەن خەتكۈشنى تەتۈر تەرتىپلىسەك بولىدۇ.
سىغىشىشچانلىقى
IE9+
      Firefox3.5+
   Chrome
   Safari
      Opera

X:first-child.26
ul li:first-child {
border-top: none;
}

بۇ قۇرۇلمىلىق ساختا كىلاس تۇنجى قىسمىي خەتكۈشنى تاللىيالايدۇ، سىز ئۇنى ئىشلىتىش ئارقىلىق بىرىنجى ۋە ئەڭ ئاخىرقى قىرنى چىقىرىۋېتەلەيسىز.
مىسال ئۈچۈن، بىز بىرقانچە قۇرى بولغان تىزىملىك بار دەيلى، ھەمدە بىرسىنىڭ border-top ۋە border-bottom خاسلىقى بولسۇن. ئۇنداقتا ئۈنۈمى بولسا بىرىنجى ۋە ئەڭ ئاخىرقىسى سەل غەلىتە كۆرۈنىدۇ. بۇ ۋاقىتتا دەل مۇشۇ ساختا كىلاسنى ئىشلىتىپ ھەل قىلساق بولىدۇ.
سىغىشىشچانلىقى
IE7+
      Firefox
      Chrome
   Safari
      Opera

X:last-child.27
ul > li:last-child {
color: green;
}

first-child بىلەن ئەكىسچە، last-childنىڭ قايتۇرىدىغىنى باش ئېلېمېنتنىڭ ئەڭ ئاخىرقى خەتكۈشى
مەسىلەن، بۇنى چۈشەندۈرۈش ئۈچۈن بىر مىسال ئىشلەپ باقايلى. تۆۋەندىكىدەك كود يېزىپ باقايلى:

List Item

List Item

List Item

بۇ يەردە ھېچقانداق چۈشەنمىگۈدەك يەر يوق، پەقەتلا بىر ئاددىي تىزىملىك
CSS
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}

li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}

ئۈستىدىكى ئۇسلۇپ كودى تەگلىك رەڭگى بېرىدۇ، توركۆرگۈچنىڭ سۈكۈتتىكى ئىچىكى تەرەپ ئارلىقنى چىقىرىۋېتىدۇ، ھەربىر li ئۈچۈن رامكىنى مەلۇم چۇڭقۇرلۇقتا ئويمان كۆرستىدۇ.
سىغىشىشچانلىقى
IE9+
   Firefox
   Chrome
      Safari
      Opera

Xnly-child.28

div pnly-child {
   color: red;
}

راستىنى دېگەندە، سىز بەلكىم بىرلا ئېلېمېنتنىڭ ساختا كىلاس(the only-child pseudo) نى ناھايىتى كۆپ ئىشلەتكىنىڭىزنى ھېس قىلمىغان بولۇشىڭىز مۇمكىن. گەرچە شۇنداق بولسىمۇ، ئۇنىڭغا ئېھتىياجلىق بولغاندا سىز ئۇنى ئىشلىتىسىز.
ئۇ سىزنىڭ ئاشۇ پەقەت بىرلا قىسمىي خەتكۈشى بولغان باش خەتكۈشكە ئېرىشىشڭىزگە يول قويىدۇ. مەسىلەن، ئۈستىدىكى بۆلەكنى پايدىلىنىش ئۈچۈن ئالساق، پەقەت بىرلا پاراگراف خەتكۈشى بولغان div قىزىلغا يولىدۇ.
تۆۋەندىكىدەك كود يېزىپ باقايلى:

My paragraph here.

Two paragraphs total.

بۇنداق ئەھۋالدا، ئىككىنجى div تاللانمايدۇ، بىرىنجى div نىڭ كۆپ قىسمىي پاراگراف خەتكۈشى بولغان ھامان، بۇ تاللىغۇچ رولىنى يوقىدۇ.
ئۈلگە
سىغىشىشچانلىقى
   IE9+
   Firefox
      Chrome
      Safari
   Opera
Xnly-of-type.29
li

nly-of-type {
font-weight: bold;
}

بۇ قۇرۇلمىلىق ساختا ئېلېمېنت(structural pseudo class) قالتىس ئۇسۇللار ئارقىلىق ئىشلىتىشكە بولىدۇ. ئۇ مەخسۇس مەلۇم بىر خەتكۈشتە پەقەت بىرلا قىسمىي خەتكۈش بولغان نىشاننى ئويېكت قىلىدۇ. مىسال ئۈچۈن، بىز پەقەت بىرلا ئەزاسى بولغان بارلىق ul نى كۆرسىتىپ باقايلى
ئالدى بىلەن ئۆزىڭىزنى بۇنى قانداق تاماملاشنى سوراپ بېقىڭ؟ سىز ul li نى ئىشلىتىشىڭىز مۇمكىن، بېراق بۇ بارلىق تىزىملىك ئەزالىرىنى نىشانلىيالمايدۇ. بۇنداق ۋاقىتتا پەقەت only-of-type ئىشلىتىلىدۇ.

ul > li

nly-of-type {
font-weight: bold;
}

سىغىشىشچانلىقى
IE9+
   Firefox 3.5+
   Chrome
      Safari
   Opera

30.X:first-of-type
X:first-of-type ساختا كىلاس كۆرسىتىلگەن خەتكۈشنىڭ بىرىنچى قىسمىي ئېلېمېنتنى تاللىسا بولىدۇ.
سىناق A
تېخىمۇ ياخشى چۈشىنىش ئۈچۈن، بىز بىر سىناق ئىشلەپ باقايلى.تۆۋەندىكى كود نى تەھرىرلىگۈچكە كۆچۈرۈڭ

My paragraph here.

List Item 1

List Item 2

List Item 3

List Item 4

ئەمدى بۇنىڭغا مۇنداقلا قاراپ list Item2 نى قانداق ئايرىپ چقىشنى پەرەز قىلىپ باقايلى، ئەگەر پەرەز قىلىپ بولغان بولسىڭىز داۋاملاشتۇرۇڭ.
1-       ئۇسۇل
بۇنى ھەل قىلىشنىڭ نۇرغۇن ئۇسۇللىرى بار. بىز بىرقەدەر قولايلىقراقىغا قاراپ باقايلى. ئالدى بىلەن First-of-type

ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
بۇ بۆلەكنىڭ مەنىسى بولسا، بەتتىكى تۇنجى تەرتىپسىز تىزىملىك ul خەتكۈشى تېپىلىدۇ، ئاندىن بىۋاستە قىسمىي خەتكۈش li تېپىلىدۇ، ئاندىن ئىككىنچى ئۇلىنىش نۇقتىسى تېپىلىدۇ.
2-       ئۇسۇل
يەنە بىر ھەل قىلىش چارىسى بولسا قوشنا تاللىغۇچ(adjacent selector)
p + ul li:last-child {
font-weight: bold;
}

بۇنداق ئەھۋال ئاستىدا، p ئاستىدىكى بىۋاسىتە ul خەتكۈشى تېپىلىدۇ، ئاندىن ئۇنىڭ ئەڭ ئاخىرقى قىسمىي خەتكۈشى تېپىلىدۇ.
3-       ئۇسۇل
بىز بۇ تاللىغۇچلارنى خالىغانچە ئويناپ قويساقمۇ بولىدۇ، مەسىلەن
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}

ئالدى بىلەن بەتتىكى بىرىنجى ul خەتكۈشىنى تېپىۋېلىپ، ئاندىن ئۇنىڭ ئاخىرقى قىسمىي خەتكۈشىنى تاپساق بولىدۇ.
سىغىشىشچانلىقى
IE9+
   Firefox 3.5+
   Chrome
   Safari
   Opera

ماقالىدە ئۇچرايدىغان ئىنگىلىزچە ئاتالغۇلار
تېمىدا تىلغا ئېلىنغان ئاتالغۇلارنى مەن ئۆزۈمنىڭ تەجىرىبىسىگە ئاساسەن ئۇيغۇرچىغا ئېلىپ ئىشلەتتىم. ئەسلى ئاتالغۇ بىلەن ئۇيغۇرچە  ئېلىنغان ئاتاتلغۇلار ئارىسىدا ئۇقۇم خاتالىقى كېلىپ چىقماسلىقى ئۈچۈن كۆپ ئۇچرايدىغان سۆزلەر بېرىلدى. ئەگەر كۆپچىلىك بۇنىڭدىنمۇ ياخشى ئۆزلەشتۈرەلىسە پىكىرىنى ئوتتۇرىغا قويسا تامامەن بولىدۇ.
1.       Selectors-تاللىغۇچ
2.       Flexibilityجانلىقلىق
3.       modern browsersزامانىۋىي توركۆرگۈچ
4.       symbol-بەلگە
5.       Trick ھۈنەر
6.       Compatibility-سىغىشىشچانلىق
7.       Target-نىشانلاش
8.       Rigid-قاتتىق تەلەپ
9.       pseudo-class- ساختا كىلاس
10.       pseudo-Element-ساختا ئېلېمېنت
11.       adjacent selector-قوشنا تاللىغۇچ
12.       external-سىرتقى
13.       regular expressions-تەھقىقلەش ئىپادىسى
14.       space-separated-بوشلۇق ئارقىلىق ئايرىلغان
15.       Block – توسۇق
16.       Stack - دۆۋە

تولۇقلىما مەزمۇن (2015-11-14 14:22):

مەنبە :نۇرقۇت تورى

于于于于于 · ۋاقتى: 2015-11-14 13:25:04

uyghur-svip يوللىغان ۋاقتى 2015-11-14 12:08
CSS3 تاللىغۇچ پارىڭى
بەلكىم سىز ئاساسىي Id,classبىلەن descendant ...

رەھمەت تېخىمۇ تىرىشىڭ

uyghur-svip · ۋاقتى: 2015-11-14 13:49:27

uyghurvivo يوللىغان ۋاقتى 2015-11-14 13:43
تېما يوللىغاندا مەنبەسىنىمۇ ئەسكەرتىپ قويۇڭ،مەنبەسى ...

ھە بولىدۇ پەقەتلا ئۇنتۇپ قاپتىمەن بۇنىڭدىن كېيىن چوقۇم مەنبەسىنى ئەسكەرتىپ قويىمەن

uyghurdetal · ۋاقتى: 2015-11-15 10:47:41

بۇ ئىككى تېما نۇرقۇت تەرەققىيات مۇنبىرىنىڭ تېمىسى.
قائىدە بويىچە نۇرقۇتتىن باشقا تور بەتلەرگە يوللانماسلىقى كېرەكتى. تېما ئىگىسى بىلمەي يوللىغان بولسا كېرەك.
باشقۇرغۇچىلارنىڭ ئويلىنىپ بېقىشىنى سورايمەن.
@alip

CSS3 تاللىغۇچلىرى ھەققىدە بايان

3ئادەم ئىنكاس يازدى

تۆھپە ئوردېنى