أدوات لالتقاط وتحويل الويب

استخدام محددات CSS في GrabzIt

يتم استخدام محددات CSS في العنصر الهدف، وإخفاء العنصر والانتظار حتى تحدد ميزات العنصر عنصرًا واحدًا أو أكثر من عناصر HTML. النوعان الرئيسيان لمحددات CSS هما إما الاختيار حسب المعرف أو الفئة. يحتوي عنصر HTML على معرف إذا كان يحتوي على سمة المعرف كما هو موضح أدناه.

<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 الأصلي. إذا كان هناك عنصر ap على سبيل المثال فإنه سيغير مؤشر nth-child.

حدد عنصر 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

الحصول على محدد CSS من المتصفح

يمكنك الحصول على محدد CSS من متصفح Chrome في خطوتين بسيطتين.

انقر بزر الماوس الأيمن على الجزء الذي تتواجد فيه من صفحة الويب intرست في وانقر فحص. سيؤدي هذا إلى فتح نافذة المفتش.

انقر بزر الماوس الأيمن على العنصر الموجود في نافذة المفتش نسخ ثم انقر فوق محدد النسخ.