توفر محددات CSS طريقة فعالة لاستهداف واستخراج محتوى محدد من صفحات HTML. يغطي هذا الدليل المتعمق كل ما تحتاج إلى معرفته للاستفادة من محددات CSS لاستخراج الويب في Python.
مقدمة إلى محددات CSS
تسمح لك محددات CSS بتحديد العناصر الموجودة على صفحة الويب بناءً على المعرف والفئة واسم العلامة والسمات والمزيد. وهنا بعض الأمثلة:
div- اختر الكلعناصر#container- حدد عنصرًا بمعرف = "حاوية".item- حدد العناصر ذات الفئة = "item"a[href^="http"]– حدد علامات الربط مع href بدءًا من http
هناك أكثر من 50 نوعًا مختلفًا من محددات CSS ومجموعات متاحة. يتضمن ذلك العلامة والمعرف والفئة والسمة والفئة الزائفة والموضعية والحالة والمعجمية.
تتضمن بعض أنواع المحددات الرئيسية ما يلي:
| منتقى | مثال | الوصف |
|---|---|---|
| النوع | a | يحدد كافة عناصر نوع العلامة المحدد |
| ID | #container | تحديد عنصر بسمة معرف محددة |
| مبوبة | .item | تحديد العناصر ذات سمة فئة محددة |
| السمة | a[target] | حدد العناصر ذات سمة محددة |
| الطبقة الزائفة | a:hover | حدد العناصر في حالة معينة |
ويمكن دمجها بطرق مختلفة لاستهداف العناصر بدقة شديدة. على سبيل المثال:
div.content table.data tr.highlight > td
والذي ينقسم إلى:
div.content-<div>العناصر ذات الفئة = "المحتوى"table.data-<table>العناصر ذات الفئة = "بيانات" داخل ملف<div>tr.highlight-<tr>العناصر ذات الفئة = "تسليط الضوء" داخل<table>> td-<td>العناصر التي هي أبناء مباشرة لل<tr>
كما ترون، تسمح لك محددات CSS بالتعمق وتحديد العناصر في تسلسل HTML الهرمي بدقة شديدة. وهذا يجعلها لا تقدر بثمن لاستخراج بيانات محددة من صفحات الويب.
تشير الدراسات إلى أنه يتم استخدام معرفات وفئات CSS في أكثر من 90% من المواقع لتمكين التصميم. وهذا الانتشار أيضًا يجعلها رائعة في اختيار المحتوى المراد استخلاصه.
استخدام محددات CSS في بايثون
تحتوي مكتبات Python الشهيرة مثل BeautifulSoup وParsel على دعم مدمج لمحددات CSS:
شوربة جميلة
لاستخدام محددات CSS في BeautifulSoup، اتصل بـ select() طريقة على BeautifulSoup موضوع:
from bs4 import BeautifulSoup
soup = BeautifulSoup(html)
links = soup.select(‘a‘) # All anchor tags
first_link = soup.select_one(‘a‘) # First anchor tagselect()تقوم بإرجاع قائمة بجميع العناصر المطابقة.select_one()إرجاع المباراة الأولى فقط.
جزء
توفر مكتبة Parsel واجهة برمجة تطبيقات مشابهة:
from parsel import Selector
selector = Selector(html)
links = selector.css(‘a‘).getall()
first_link = selector.css(‘a‘).get().css()ينفذ محددات CSS.getall()إرجاع كافة المباريات.get()تعود المباراة الأولى
يتم استخدام Parsel داخليًا بواسطة إطار عمل Scrapy webcraping.
مقارنة المكتبات
يتمتع كل من BeautifulSoup وParsel بوظيفة محدد CSS متطابقة تقريبًا. يعد Parsel أسرع قليلاً في المعايير ولكن BeautifulSoup يوفر ميزات إضافية مثل البحث في DOM وتعديله.
بالنسبة لمعظم أغراض التجريد، يكون دعم محدد CSS الخاص بهم قابلاً للتبديل.
أمثلة على محدد CSS
لنستعرض الآن بعض الأمثلة المحددة لاستخدام محددات CSS لاستخراج البيانات:
الحصول على العناصر حسب اسم العلامة
تحديد كافة الارتباطات التشعبية الموجودة على الصفحة:
links = soup.select(‘a‘)وهذا سوف يتطابق مع أي <a> عناصر علامة الربط.
حدد العنصر حسب المعرف
احصل على نموذج على صفحة بمعرف محدد:
login_form = soup.select_one(‘#loginForm‘) • # تشير البادئة إلى مطابقة سمة المعرف. سيؤدي هذا إلى تحديد العنصر مع id="loginForm".
يجب أن تكون المعرفات فريدة داخل الصفحة، لذا سيُرجع هذا دائمًا عنصرًا واحدًا.
الحصول على العناصر حسب اسم الفئة
حدد كافة عناصر الصفحة ذات فئة معينة:
products = soup.select(‘.product-item‘)• . تشير البادئة إلى محدد الفئة. سيؤدي هذا إلى تحديد جميع العناصر ذات class="product-item".
لاحظ أنه يمكن إعادة استخدام الفئات بحيث قد يتطابق مع عناصر متعددة.
حدد حسب قيمة السمة
استخراج حقول الإدخال بناءً على سمة نوعها:
text_inputs = soup.select(‘input[type="text"]‘)• [attribute="value"] يتيح لك بناء الجملة المطابقة حسب قيم سمات محددة.
الجمع بين محددات متعددة
حدد نقاط ارتساء داخل قسم شريط جانبي محدد:
sidebar_links = soup.select(‘div.sidebar a.highlight‘)هذا سوف يتطابق <a> العناصر مع class="highlight" في الداخل <div class="sidebar">.
يمكن دمج المحددات المتعددة عن طريق فصلها بمسافة تحدد العناصر التابعة.
تجريف البيانات باستخدام محددات CSS
بمجرد استخراج العناصر، يمكن استخدام محددات CSS لاستخراج البيانات:
for product in soup.select(‘.product‘):
name = product.select_one(‘.product-name‘).text
price = product.select_one(‘.product-price‘).text
print(name, price)هذا يتكرر .product العناصر، والخدوش .product-name و .product-price القيم من داخل كل كتلة منتج.
تتمثل ميزة محددات CSS في أنها تسمح لك بعزل البيانات التي تريدها عن HTML المحيط.
مثال على الكشط – صناديق معلومات ويكيبيديا
على سبيل المثال، النظر في تجريف صناديق المعلومات من ويكيبيديا:
url = ‘https://en.wikipedia.org/wiki/Abraham_Lincoln‘
soup = BeautifulSoup(requests.get(url).text)
infobox = soup.select_one(‘.infobox‘)
title = infobox.select_one(‘.fn‘).text
born = infobox.select_one(‘.bday‘).text
office = infobox.select_one(‘.label[style*=bold]‘).text
print(title) # Abraham Lincoln
print(born) # February 12, 1809
print(office) # 16th President of the United Statesيؤدي هذا إلى عزل محتوى صندوق المعلومات الذي يستخدمه .infobox class، ثم يستخرج حقولًا محددة باستخدام محددات العلامات والفئة والسمات المتداخلة.
كما ترون، فإن ربط أنواع مختلفة من المحددات معًا يتيح لك التركيز على البيانات التي تحتاجها.
استخراج البيانات من الجدول
يمكن أن تساعد المحددات أيضًا في استخراج البيانات الجدولية:
url = ‘https://www.example.com/data.html‘
soup = BeautifulSoup(requests.get(url).text)
table = soup.select_one(‘table.data-table‘)
headers = [h.text for h in table.select(‘th‘)]
rows = []
for row in table.select(‘tr‘):
cells = [d.text for d in row.select(‘td‘)]
rows.append(dict(zip(headers, cells)))
print(rows) يؤدي هذا إلى استخراج جدول بيانات، وقراءة تسميات الرؤوس، ثم تكرار الصفوف وإنشاء قاموس من أزواج خلايا الرأس.
تتيح محددات CSS إمكانية استخراج البيانات المنظمة بسهولة.
حدود محددات CSS للتجريد
أحد عيوب محددات CSS هو أنها يمكنها فقط تحليل HTML الثابت، ولا تعمل مع المحتوى الذي يتم تحميله ديناميكيًا عبر JavaScript. يتطلب تجريف المواقع الحديثة أدوات إضافية مثل السيلينيوم أو أتمتة المتصفح.
كما أنها توفر قدرة محدودة على اجتياز العناصر الرئيسية واختيارها. لذا فإن التسلسل لا يمكن إلا أن يتنقل إلى أسفل التسلسل الهرمي، وليس إلى أعلى.
على الرغم من ذلك، تظل محددات CSS أداة أساسية للتجريد نظرًا لوجودها في كل مكان وسرعتها وملاءمتها لاستخراج البيانات.
تسلسل محددات CSS
يسمح التسلسل بالتنقيب عبر العناصر السليلة:
rows = soup.select(‘div#content table.data tr‘)
for row in rows:
name = row.select_one(‘td.name‘).text
price = row.select_one(‘td.price‘).text
print(name, price)في البداية <tr> يتم تحديد الصفوف، ثم محددة <td> يتم استخراج الخلايا من داخل كل صف عن طريق التسلسل.
تتيح محددات التسلسل مجتمعة استخراج البيانات فيما يتعلق بالبنية والمحتوى المحيطين.
محددات CSS المتقدمة
هناك أيضًا بعض إمكانيات محدد CSS الأكثر تقدمًا والتي تستحق التغطية:
البدل
• * محدد حرف البدل يطابق أي عنصر:
panels = soup.select(‘div.panel *‘) # All descendantsمحددات السمات
من الممكن مطابقة السمات الأكثر تعقيدًا:
input[type^="text"] # Type starts with "text"
a[href$=".pdf"] # Href ends with ".pdf"
div[class*="head"] # Class contains "head"المحددات الزائفة
محددات الحالة الخاصة مثل :hover, :visited إلخ. على سبيل المثال:
a:visited {color: purple}يختلف الدعم عبر الموزعين. بعض المحددات الزائفة تحب :contains() هي امتدادات مخصصة بدلاً من CSS.
محددات الأشقاء
الهدف يعتمد على الأشقاء، على سبيل المثال الأخوة المجاورين p + ul ويرى <ul> مباشرة بعد <p>.
والنفي
:not(selector) يستبعد العناصر المطابقة.
توفر هذه المحددات الإضافية تحكمًا أكثر دقة في عملية الكشط.
تجريف المواقع التفاعلية
على الرغم من أن محددات CSS تعمل فقط على HTML الثابت، إلا أن هناك طرقًا لاستخدامها عند استخراج الصفحات التفاعلية باستخدام محتوى تم إنشاؤه بواسطة JavaScript:
أتمتة المتصفح
يمكن لأدوات مثل السيلينيوم أن تدفع المتصفح لعرض JavaScript قبل التحليل باستخدام محددات CSS:
from selenium import webdriver
driver = webdriver.Chrome()
driver.get(url)
soup = BeautifulSoup(driver.page_source)
results = soup.select(‘#results .result‘)يتيح ذلك تحديد العناصر بعد تشغيل JS.
تصفح مقطوعة الرأس
الكشط بدون رأس، توفر أدوات مثل Puppeteer وPlaywright دعمًا لمحدد CSS:
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto(url)
html = page.content()
soup = BeautifulSoup(html)يمكن تحليل محتوى الصفحة بعد عرض JavaScript.
ملحقات المتصفح
تعمل ملحقات المتصفح مثل SelectorGadget على التخلص من محددات CSS من خلال تحليل حركة مرور الشبكة وDOM.
تسمح هذه الأساليب باستخدام محددات CSS في المواقع الديناميكية. لا تزال المحددات مطابقة لـ HTML فقط، ولكن يتم إنشاؤها ديناميكيًا عبر JavaScript.
القيود والتحديات
على الرغم من أن محددات CSS موجودة في كل مكان ومريحة، إلا أن لديها بعض القيود:
تجريف المواقع المعقدة
يواجه المحددون بعض هياكل الموقع المعقدة:
- تتطلب الإطارات وإطارات iframe تحليلًا منفصلاً.
- قد تتطلب الشبكات والتخطيطات المتقدمة محددات معقدة.
- تتطلب عناصر واجهة المستخدم التفاعلية والتطبيقات المضمنة أساليب بديلة.
غالبًا ما تكون هناك حاجة إلى مزيج من اختيار CSS ومنطق التحليل الآخر.
قضايا الأداء
يمكن أن تصبح المحددات الطويلة والمعقدة بطيئة. يجب تجنب التعشيش على عمق أكثر من 3-4 مستويات.
ننصح بإبقاء المحددات الفردية بسيطة، بحيث لا تزيد عن 3-4 مكونات. قم بتسلسل محددات بسيطة متعددة بدلاً من التعبيرات المفردة المعقدة.
محددات هشة
يؤدي الاستهداف المستند إلى سمات مثل الفئة والمعرف إلى محددات هشة تنكسر بسهولة إذا تغيرت هذه القيم عند إعادة تصميم الموقع.
حيثما أمكن، استهدف العناصر بناءً على الاسم والمنصب والتسلسل الهرمي بدلاً من السمات الهشة. أو قم بدمج محددات متعددة كنسخ احتياطية.
حدود اجتياز DOM
يمكن لمحددات CSS فقط اجتياز الشجرة التابعة، وليس حتى العناصر الأصلية.
توفر تعبيرات XPath اجتيازًا أكثر مرونة لأعلى ولأسفل في المستند.
دعم المحدد الزائف
محددات CSS الزائفة الكلاسيكية مثل :visited و :hover لديك دعم محدود عبر المستعرضات في الموزعين. محددات مخصصة مثل :contains() غير قياسية.
اعتمد على فصول زائفة بسيطة مثل :first-child بدلاً من المحددات الزائفة المعقدة.
بدائل لمحددات CSS
على الرغم من أن محددات CSS لا غنى عنها، إلا أنها ليست اللعبة الوحيدة المتوفرة لتحليل HTML:
كسباث
XPath هي لغة استعلام لتحديد العقد في مستندات XML/HTML وتوفر بديلاً لـ CSS.
الايجابيات:
- اجتياز أكثر قوة لبنية الوثيقة.
- معيار قوي تحافظ عليه W3C.
سلبيات:
- بناء جملة مطول ومعقد.
- يمكن أن يكون الأداء أبطأ.
رجإكس
يمكن للتعبيرات العادية استخراج أنماط النص:
الايجابيات:
- مطابقة الأنماط القوية المرنة.
سلبيات:
- فوضوي عند تحليل HTML المتداخل.
- لا يوجد دعم مدمج للاجتياز.
من الناحية العملية، غالبًا ما يوفر مزيج من محددات CSS وXPath وRegex أقوى الإمكانات لتجميع الويب على المستوى الصناعي.
الأدوات والمكتبات
فيما يلي بعض الأدوات الأساسية للعمل مع محددات CSS:
- أداة التحديد - ملحق المتصفح لإنشاء المحددات.
- الكاتب المسرحي - مكشطة مقطوعة الرأس مع دعم محدد CSS.
- Scrapy - إطار عمل تجريف الويب باستخدام محددات Parsel وCSS.
- العرائس – كشط الكروم مقطوعة الرأس.
- شوربة جميلة - محلل لغة Python HTML الرائد.
توفر هذه كل ما هو مطلوب للاستفادة من محددات CSS في عملية تجريف الويب الخاصة بالإنتاج.
وفي الختام
توفر محددات CSS آلية متعددة الاستخدامات وواسعة الانتشار لاستخراج البيانات من صفحات الويب. إن انتشار المعرفات والفئات في HTML يجعلها مثالية للتنقيب لاستخراج المحتوى الذي تحتاجه فقط.
إن إتقان مجموعة متنوعة من أنواع المحددات ودمجها من خلال التسلسل والتداخل يسمح باستهداف دقيق للغاية. بفضل قوة مكتبات Python مثل BeautifulSoup وParsel، تعد محددات CSS تقنية أساسية لأي أداة استخراج ويب.
