כלים ללכידה ולהמרה של האינטרנט

שימוש בבוחרי CSS ב- GrabzIt

בוחרי CSS משמשים באלמנט היעד, מסתירים אלמנט ומחכים לתכונות אלמנט לזהות אלמנט HTML אחד או יותר. שני הסוגים העיקריים של בוחרי CSS הוא לבחור לפי זיהוי או כיתה. לאלמנט HTML יש מזהה אם הוא מכיל את תכונת ה- id כמוצג להלן.

<span id="myidentifier">Example Text</span>

כדי לבחור בו אתה יוצר בורר CSS כמו #myidentifier

אם לאלמנט HTML יש מחלקה תהיה לו תכונת הכיתה כפי שמוצג בדוגמה זו.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

כדי לבחור בו אתה יוצר בורר CSS כמו .myclass

אם רצית לבחור אלמנט מסוים בכיתה של myclass אתה יכול להשתמש בבוררי CSS רגילים כדי לעשות זאת במקרה זה ילד בן (2) בורר כזה: .myclass:nth-child(2) כדי לבחור את טווח myclass השני. עם זאת זה יעבוד רק במקרה זה מכיוון שאין אלמנטים אחרים תחת האלמנט div div. אם היה למשל אלמנט ap זה ישנה את מדד הילודים.

בחר אלמנט HTML ללא מזהה או מחלקה ייחודיים

לפעמים אלמנט HTML שעליך לבחור אינו מכיל מזהה או מחלקה הייחודיים בדף. בעת בחירת רכיבי HTML אלה, נדרש בורר CSS מסובך יותר.

<div class="Header">
   <a href="https://www.example.com/">
     <div>...</div>
   </a>
   <div class="SearchBar">...</div>
   <div class="TagLine">...</div>
</div>

לדוגמה, בדוגמה לעיל אנו רוצים לבחור את האלמנט DIV בתוך הקישור. לשם כך עלינו לציין בורר CSS הפועל מה- DIV הייחודי עם ה- Header מעמד.

div.Header a div

בוחרי CSS הם תכונה סטנדרטית בפיתוח אתרים. מאמר זה נותן סקירה טובה של כיצד להשתמש בבוררי CSS - -.

טיפול באלמנטים תואמים מרובים

אם אלמנטים רבים של HTML מוחזרים מבורר CSS ואתה משתמש באלמנט היעד או מחכה לתכונות של רכיב, ייעשה שימוש רק באלמנט התואם הראשון. עם זאת, אם אתה משתמש בתכונה של רכיב הסתר, כל רכיבי HTML התואמים היו מוסתרים.

אם רצית להסתיר אלמנטים מרובים עם מזהים או שיעורים שונים אתה יכול לעשות זאת על ידי הפרדת כל בורר CSS עם פסיק. אז למשל כדי להסתיר את המחלקה והתעודה לדוגמה שלמעלה, תשתמשו בהמשך #myidentifier,.myclass