في CSS 3، لنفترض أنك قمت بإنشاء ملف HTML يحتوي على بنية العلامة التالية:
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content- Secondary"></div>
<div id="tertiary-content"></div>
<div id="nav- Secondary"></div>
ثم في ملف CSS
div[id^="nav"] { الخلفية:#ff0 }
لاحظ " ^ "
سيتحكم CSS في [u]div#nav-primary وdiv#nav- Secondary[/u] في هذه الحالة. يرجى ملاحظة أن هاتين التسميتين مسبوقتان بـ nav ، ليس من الواضح ما إذا كان مفصولاً بـ "-" أو ما إذا كان المعرف مطابقًا من الأمام إلى الخلف [عرق]
div[id$="primary"] { الخلفية:#ff0 }
لاحظ أنه " $ "
سيتحكم CSS في [u]div#nav-primary وdiv#content-primary[/u] في هذه الحالة. يرجى ملاحظة أن هناك علامات أولية بعد هاتين العلامتين، وليس من الواضح ما إذا كان "-" يستخدم للفصل، أو ما إذا كان المعرف مطابقًا من الخلف إلى الأمام.
div[id*="content"] { الخلفية:#ff0 }
لاحظ أنه " * "
سيتحكم CSS في هذه الحالة في [u]div#content-primary div#content- Secondary وdiv#tertiary-content[/u]. يرجى ملاحظة أن جميع هذه العلامات تحتوي على محتوى ، وليس من الواضح ما إذا كانت مفصولة بـ "-" أو ما إذا كان المعرف قد تم مسحه ضوئيًا ومطابقته تلقائيًا.
يبدو أن المؤلف قال أن هذه العلامات مدعومة الآن بواسطة أحدث الإصدارات من المتصفحات المختلفة باستثناء IE. يمكنك تجربتها، لكنني لن أحاول ذلك ~ [lol]
div#content-primary:target { المخطط التفصيلي:1px Solid #300 }
لاحظ أن " :الهدف "
في هذه الحالة، سيتحكم CSS في رابط الربط http: //www.example.com/index.html #content-primary (يمكن فهم رابط الربط على أنه رابط داخل صفحة ويب، مقارنةً بالعائد الذي يظهر على بعض مواقع الويب الصفحات) أعلى )
يقول المؤلف أن متصفحي Mozilla وSafari يدعمان هذا الآن
الإدخال [نوع = "نص"]: ممكّن { الخلفية: #ffc }
الإدخال[نوع = "نص"]: معطل { الخلفية: #ddd }
لاحظ أن " [type = "text"]: ممكّن "
هذا هو CSS الذي يتحكم في النموذج. "[u] [type = "text"] [/ u]" يبدو أنه يعني أن النوع الموجود في النموذج هو نص. . . ماذا سيكون [u]type = "password"[/u]؟
الإدخال: محدد { الحدود: 1 بكسل صلب #090 }
لاحظ أن " : تم التحديد "
هذا هو CSS الذي يتحكم في "تحديد" النموذج. . .
يقول المؤلف أن متصفحي Opera وMozilla يدعمان هذه الميزات الآن
:الجذر { الخلفية:#ff0 }
أتش تي أم أل { الخلفية: #ff0 }
يرجى الانتباه إلى ذلك " :root "
هذه ":root" هي علامة ذات مستوى أعلى من html. يمكنك قراءة هذه المقالة التي كتبها Chidori Ichiba لفهم html والجسم بشكل صحيح. اكتشف في المقالة أن هناك إطارًا خارج html، hehe~
يقول المؤلف أن متصفحي Mozilla وSafari يدعمان هذا الآن
التالي : nth-child() أكثر إثارة للاهتمام، هاها~ يمكنك وضع الأرقام والحروف الافتراضية بين قوسين~
ص:nth-child(3) { اللون:#f00 }
يبدو أن هذا يعني أنه استنادًا إلى ظهور P لأول مرة، سيتم التحكم في جميع P التي هي مضاعفات الرقم "3" ~
ص:nth-child(odd) { اللون:#f00 }
يبدو أن هذا يعني أنه بناءً على أول P الذي يظهر، سيتم التحكم في جميع الأعداد الفردية لـ P~
ص: نث-طفل (حتى) { اللون: #f00 }
يبدو أن هذا يعني أنه بناءً على الحرف P الأول الذي يظهر، سيتم التحكم في جميع الأرقام الزوجية ~
ص:nth-child(3n+0) { اللون:#f00 }
ص:nth-child(3n) { اللون:#f00}
هاتان العلامتان متكافئتان، لأن 0 بعد العلامة الأولى ليس له أي تأثير. ما يعنيه هو أنه سيتم التحكم في P التي تعادل 3 أضعاف P الأولى ~ (يا له من تطور، HOHO ~ [rolleyes]) بمعنى آخر. ، سيأخذ هذا "n" قيمة من 0.1.2.3.4.5.6....~ سيتم التحكم في أكبر عدد ممكن من P. . .
tr:nth-child(2n+11) { الخلفية:#ff0 }
إذا فهمت ما سبق، فهذا ليس من الصعب فهمه، لكن التسمية التي يتحكم بها قد تغيرت إلى "tr". وهذا يعني أن الجدول سيصبح أكثر تنوعًا، وأشعر أنه يجب على الجميع أن يجيدوا الحساب في المدرسة الابتدائية ولا يتعلموا حسنًا، عد إلى المنزل سريعًا وتعلم بعض العمليات الحسابية الأولية مرة أخرى. . . (ومع ذلك، هل تزيد هذه التسمية من كفاءة معالجة الكمبيوتر؟ [مرتبك] أتمنى ألا يكون إحباطي غير ضروري...)
ص:الطفل الأخير { الخلفية:#ff0 }
يتم التحكم بـ p قبل p (NND، p يأتي ويذهب، ويضرب pp [عرق])
:not(p) { الحدود: 1px صلب #ccc }
لا يتم التحكم في هذا p وهذا يعني أنه يستخدم أسلوبه الخاص ويجب استخدامه مع الأساليب السابقة. . .
ع ~ أول { الخلفية: #ff0 }
يتم عرض ul بالأولوية على p. لا أعرف ما هي طريقة الأولوية هذه. . .
في الأساس، هذا كل ما يمكنني فهمه. يمكنك الذهاب إلى الموقعين التاليين لمواصلة التعلم. إذا قلت أي شيء خاطئ، تذكر أن تخبرني.
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/