看到這個(gè)問(wèn)題必須來(lái)怒答一波~用python爬蟲(chóng)爬便宜機(jī)票了解一下?
喜歡旅行又怕吃土?讓Python來(lái)爬取最便宜機(jī)票吧!圖源:
videoblocks.com
你喜歡旅行嗎?
這個(gè)問(wèn)題通常會(huì)得到一個(gè)肯定的答案,隨后引出一兩個(gè)有關(guān)之前冒險(xiǎn)經(jīng)歷的故事。大多數(shù)人都認(rèn)為旅行是體驗(yàn)新文化和開(kāi)闊視野的好方法。但如果問(wèn)題是“你喜歡搜索機(jī)票的過(guò)程嗎?”也許話(huà)題就到此為止了……
可事實(shí)上,便宜的機(jī)票往往也很重要!本文將嘗試構(gòu)建一個(gè)網(wǎng)絡(luò)爬蟲(chóng),該爬蟲(chóng)對(duì)特定目的地運(yùn)行并執(zhí)行帶有浮動(dòng)日期(首選日期前后最多三天)的航班價(jià)格搜索。它會(huì)將結(jié)果保存為excel文件并發(fā)送一封包含快速統(tǒng)計(jì)信息的電子郵件。顯然,這個(gè)爬蟲(chóng)的目的就是幫助我們找到最優(yōu)惠的價(jià)格!
你可以在服務(wù)器上運(yùn)行腳本(一個(gè)簡(jiǎn)單的Raspberry Pi就可以),每天運(yùn)行一到兩次。結(jié)果會(huì)以郵件形式發(fā)送,建議將excel文件存入Dropbox文件夾,以便隨時(shí)隨地查看。
因?yàn)榕老x(chóng)以“浮動(dòng)日期”進(jìn)行搜索,所以它會(huì)搜索首選日期前后最多三天的航班信息。盡管該腳本一次僅運(yùn)行一對(duì)目的地,但可以很容易地改寫(xiě)該爬蟲(chóng)使其每個(gè)循環(huán)運(yùn)行多個(gè)目的地。最終甚至可能找到一些錯(cuò)誤票價(jià)...那會(huì)很有意思!
另一個(gè)爬蟲(chóng)某種意義上來(lái)講,網(wǎng)絡(luò)爬取是互聯(lián)網(wǎng)“工作”的核心。
也許你認(rèn)為這是一個(gè)十分大膽的說(shuō)法,但谷歌就是從拉里·佩奇用Java和Python構(gòu)建的網(wǎng)絡(luò)爬蟲(chóng)開(kāi)始的。爬蟲(chóng)不斷地爬取信息,整個(gè)互聯(lián)網(wǎng)都在試圖為所有問(wèn)題提供最佳的可能答案。網(wǎng)絡(luò)爬取有不計(jì)其數(shù)的應(yīng)用程序,即使更喜歡數(shù)據(jù)科學(xué)中的其他分支,你仍需要一些爬取技巧以獲得數(shù)據(jù)。
這里用到的一些技術(shù)來(lái)自于最近新的一本佳作《Python網(wǎng)絡(luò)數(shù)據(jù)采集》,書(shū)中包含與網(wǎng)絡(luò)爬取相關(guān)的所有內(nèi)容,并提供了大量簡(jiǎn)例和實(shí)例。甚至有一個(gè)特別有意思的章節(jié),講述如何解決驗(yàn)證碼檢驗(yàn)的問(wèn)題。
Python的拯救第一個(gè)挑戰(zhàn)就是選擇爬取信息的平臺(tái),本文選擇了客涯(Kayak)。我們?cè)囘^(guò)了Momondo, 天巡(Skyscanner), 億客行(Expedia)和其它一些網(wǎng)站,但是這些網(wǎng)站上的驗(yàn)證碼特別變態(tài)。
在那些“你是人類(lèi)嗎?”的驗(yàn)證中,嘗試了多次選擇交通燈、十字路口和自行車(chē)后,客涯似乎是最好的選擇,盡管短時(shí)間內(nèi)加載太多頁(yè)面它會(huì)跳出安全檢查。
我們?cè)O(shè)法讓機(jī)器人每4到6個(gè)小時(shí)查詢(xún)一次網(wǎng)站,結(jié)果一切正常。雖然說(shuō)不定哪個(gè)部分偶爾會(huì)出點(diǎn)小問(wèn)題,但是如果收到驗(yàn)證碼,既可以手動(dòng)解決問(wèn)題后啟動(dòng)機(jī)器人,也可以等待幾小時(shí)后的自動(dòng)重啟。
如果你是網(wǎng)絡(luò)爬取新手,或者不知道為何有些網(wǎng)站花費(fèi)很大力氣阻止網(wǎng)絡(luò)爬取,那么為構(gòu)建爬蟲(chóng)寫(xiě)下第一行代碼前,你一定要多加努力。
谷歌的“網(wǎng)絡(luò)爬取規(guī)范”:
http://lmgtfy.com/?q=web+scraping+etiquette
系緊安全帶...導(dǎo)入并打開(kāi)Chrome瀏覽器標(biāo)簽頁(yè)后,會(huì)定義一些循環(huán)中會(huì)用到的函數(shù)。這個(gè)架構(gòu)的構(gòu)思大概是這樣的:
· 一個(gè)函數(shù)用于啟動(dòng)機(jī)器人程序,表明想要搜索的城市和日期。
· 這個(gè)函數(shù)獲得首輪搜索結(jié)果,按“最佳”航班排序,然后點(diǎn)擊“加載更多結(jié)果”。
· 另一個(gè)函數(shù)會(huì)爬取整個(gè)頁(yè)面,并返回一個(gè)dataframe數(shù)據(jù)表。
· 隨后重復(fù)步驟2和步驟3,得出按“價(jià)格”和“航行時(shí)間”排序的結(jié)果。
· 發(fā)送一封簡(jiǎn)要總結(jié)價(jià)格(最低價(jià)和平均價(jià))的郵件,并將帶有這三種排序類(lèi)型的dataframe數(shù)據(jù)表保存為一份excel文件。
· 以上所有步驟會(huì)在循環(huán)中重復(fù),每X小時(shí)運(yùn)行一次。
每個(gè)Selenium項(xiàng)目都以一個(gè)網(wǎng)頁(yè)驅(qū)動(dòng)器開(kāi)始。我們使用Chromedriver驅(qū)動(dòng)器,但還有其它選擇。PhantomJS和Firefox也很受歡迎。下載Chromedriver后,將其置于一個(gè)文件夾中即可。第一行代碼會(huì)打開(kāi)一個(gè)空白Chrome標(biāo)簽頁(yè)。
from time import sleep, strftime
from random import randint
import pandas as pd
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import smtplib
from email.mime.multipart import MIMEMultipart
# Change this to your own chromedriver path!
chromedriver_path = 'C:/{YOUR PATH HERE}/chromedriver_win32/chromedriver.exe'
driver = webdriver.Chrome(executable_path=chromedriver_path) # This will open the Chrome window
sleep(2)
這些是將用于整個(gè)項(xiàng)目的包。使用randint函數(shù)令機(jī)器人在每次搜索之間隨機(jī)睡眠幾秒鐘。這對(duì)任何一個(gè)機(jī)器人來(lái)說(shuō)都是必要屬性。如果運(yùn)行前面的代碼,應(yīng)該打開(kāi)一個(gè)Chrome瀏覽器窗口,機(jī)器人會(huì)在其中導(dǎo)航。
一起來(lái)做一個(gè)快速測(cè)試:在另一個(gè)窗口上訪(fǎng)問(wèn)客涯網(wǎng)(http://kayak.com),選擇往返城市和日期。選擇日期時(shí),確保選擇的是“+-3天”。由于在編寫(xiě)代碼時(shí)考慮到了結(jié)果頁(yè)面,所以如果只想搜索特定日期,很可能需要做一些微小的調(diào)整。
點(diǎn)擊搜索按鈕在地址欄獲取鏈接。它應(yīng)該類(lèi)似于下面所使用的鏈接,將變量kayak定義為url,并從網(wǎng)頁(yè)驅(qū)動(dòng)器執(zhí)行g(shù)et方法,搜索結(jié)果就會(huì)出現(xiàn)。
無(wú)論何時(shí),只要在幾分鐘內(nèi)使用get命令超過(guò)兩到三次,就會(huì)出現(xiàn)驗(yàn)證碼。實(shí)際上可以自己解決驗(yàn)證碼,并在下一次驗(yàn)證出現(xiàn)時(shí)繼續(xù)進(jìn)行想要的測(cè)試。從測(cè)試來(lái)看,第一次搜索似乎一直沒(méi)有問(wèn)題,所以如果想運(yùn)行這份代碼,并讓它在較長(zhǎng)的時(shí)間間隔后運(yùn)行,必須解決這個(gè)難題。你并不需要十分鐘就更新一次這些價(jià)格,對(duì)吧?
每個(gè)XPath都有陷阱到目前為止,已經(jīng)打開(kāi)了一個(gè)窗口,獲取了一個(gè)網(wǎng)站。為了開(kāi)始獲取價(jià)格和其他信息,需要使用XPath或CSS選擇器,我們選擇了XPath。使用XPath導(dǎo)航網(wǎng)頁(yè)可能會(huì)令人感到困惑,即使使用從inspector視圖中直接使用“復(fù)制XPath”,但這不是獲得所需元素的最佳方法。有時(shí)通過(guò)“復(fù)制XPath”這個(gè)方法獲得的鏈接過(guò)于針對(duì)特定對(duì)象,以至于很快就失效了?!禤ython網(wǎng)絡(luò)數(shù)據(jù)采集》一書(shū)很好地解釋了使用XPath和CSS選擇器導(dǎo)航的基礎(chǔ)知識(shí)。
接下來(lái),用Python選擇最便宜的結(jié)果。上面代碼中的紅色文本是XPath選擇器,在網(wǎng)頁(yè)上任意一處右鍵單擊選擇“inspect”就可以看到它。在想要查看代碼的位置,可以再次右鍵單擊選擇“inspect”。
為說(shuō)明之前所觀察到的從“inspector”復(fù)制路徑的缺陷,請(qǐng)參考以下差異:
1 # This is what the copymethod would return. Right click highlighted rows on the right side and select “copy> Copy XPath”//*[@id=“wtKI-price_aTab”]/div[1]/div/div/div[1]/div/span/span
2 # This is what I used todefine the “Cheapest” buttoncheap_results= ‘//a[@data-code = “price”]’
第二種方法的簡(jiǎn)潔性清晰可見(jiàn)。它搜索具有data-code等于price屬性的元素a。第一種方法查找id等于wtKI-price_aTab的元素,并遵循第一個(gè)div元素和另外四個(gè)div和兩個(gè)span。這次……會(huì)成功的?,F(xiàn)在就可以告訴你,id元素會(huì)在下次加載頁(yè)面時(shí)更改。每次頁(yè)面一加載,字母wtKI會(huì)動(dòng)態(tài)改變,所以只要頁(yè)面重新加載,代碼就會(huì)失效。花些時(shí)間閱讀XPath,保證你會(huì)有收獲。
不過(guò),使用復(fù)制的方法在不那么“復(fù)雜”的網(wǎng)站上工作,也是很好的!
基于以上所展示的內(nèi)容,如果想在一個(gè)列表中以幾個(gè)字符串的形式獲得所有搜索結(jié)果該怎么辦呢?其實(shí)很簡(jiǎn)單。每個(gè)結(jié)果都在一個(gè)對(duì)象中,這個(gè)對(duì)象的類(lèi)是“resultWrapper”。獲取所有結(jié)果可以通過(guò)像下面這樣的for循環(huán)語(yǔ)句來(lái)實(shí)現(xiàn)。如果你能理解這一部分,應(yīng)該可以理解接下來(lái)的大部分代碼。它基本上指向想要的結(jié)果(結(jié)果包裝器),使用某種方式(XPath)獲得文本,并將其放置在可讀對(duì)象中(首先使用flight_containers,然后使用flight_list)。
前三行已展示在圖中,并且可以清楚地看到所需的內(nèi)容,但是有獲得信息的更優(yōu)選擇,需要逐一爬取每個(gè)元素。
準(zhǔn)備起飛吧!最容易編寫(xiě)的函數(shù)就是加載更多結(jié)果的函數(shù),所以代碼由此開(kāi)始。為了在不觸發(fā)安全驗(yàn)證的前提下最大化所獲取的航班數(shù)量,每次頁(yè)面顯示后,單擊“加載更多結(jié)果”。唯一的新內(nèi)容就是所添加的try語(yǔ)句,因?yàn)橛袝r(shí)按鈕加載會(huì)出錯(cuò)。如果它對(duì)你也有用,只需在前面展示的start_kayak函數(shù)中進(jìn)行簡(jiǎn)要注釋。
# Load more results to maximize the scraping
def load_more():
try:
more_results = '//a[@class = “moreButton”]'
driver.find_element_by_xpath(more_results).click()
# Printing these notes during the program helps me quickly check what it is doing
print('sleeping…..')
sleep(randint(45,60))
except:
pass
現(xiàn)在,經(jīng)過(guò)這么長(zhǎng)的介紹,已經(jīng)準(zhǔn)備好定義實(shí)際爬取頁(yè)面的函數(shù)。
我們編譯了下一個(gè)函數(shù)page_scrape中的大部分元素。有時(shí)這些元素會(huì)返回列表插入去程信息和返程信息之間。這里使用了一個(gè)簡(jiǎn)單的辦法分開(kāi)它們,比如在第一個(gè) section_a_list和section_b_list變量中,該函數(shù)還返回一個(gè)flight_df數(shù)據(jù)表。所以可以分離在不同分類(lèi)下得到的結(jié)果,之后再把它們合并起來(lái)。
def page_scrape():
“““This function takes care of the scraping part”““
xp_sections = '//*[@class=“section duration”]'
sections = driver.find_elements_by_xpath(xp_sections)
sections_list = [value.text for value in sections]
section_a_list = sections_list[::2] # This is to separate the two flights
section_b_list = sections_list[1::2] # This is to separate the two flights
# if you run into a reCaptcha, you might want to do something about it
# you will know there's a problem if the lists above are empty
# this if statement lets you exit the bot or do something else
# you can add a sleep here, to let you solve the captcha and continue scraping
# i'm using a SystemExit because i want to test everything from the start
if section_a_list == []:
raise SystemExit
# I'll use the letter A for the outbound flight and B for the inbound
a_duration = []
a_section_names = []
for n in section_a_list:
# Separate the time from the cities
a_section_names.append(''.join(n.split()[2:5]))
a_duration.append(''.join(n.split()[0:2]))
b_duration = []
b_section_names = []
for n in section_b_list:
# Separate the time from the cities
b_section_names.append(''.join(n.split()[2:5]))
b_duration.append(''.join(n.split()[0:2]))
xp_dates = '//div[@class=“section date”]'
dates = driver.find_elements_by_xpath(xp_dates)
dates_list = [value.text for value in dates]
a_date_list = dates_list[::2]
b_date_list = dates_list[1::2]
# Separating the weekday from the day
a_day = [value.split()[0] for value in a_date_list]
a_weekday = [value.split()[1] for value in a_date_list]
b_day = [value.split()[0] for value in b_date_list]
b_weekday = [value.split()[1] for value in b_date_list]
# getting the prices
xp_prices = '//a[@class=“booking-link”]/span[@class=“price option-text”]'
prices = driver.find_elements_by_xpath(xp_prices)
prices_list = [price.text.replace('$','') for price in prices if price.text != '']
prices_list = list(map(int, prices_list))
# the stops are a big list with one leg on the even index and second leg on odd index
xp_stops = '//div[@class=“section stops”]/div[1]'
stops = driver.find_elements_by_xpath(xp_stops)
stops_list = [stop.text[0].replace('n','0') for stop in stops]
a_stop_list = stops_list[::2]
b_stop_list = stops_list[1::2]
xp_stops_cities = '//div[@class=“section stops”]/div[2]'
stops_cities = driver.find_elements_by_xpath(xp_stops_cities)
stops_cities_list = [stop.text for stop in stops_cities]
a_stop_name_list = stops_cities_list[::2]
b_stop_name_list = stops_cities_list[1::2]
# this part gets me the airline company and the departure and arrival times, for both legs
xp_schedule = '//div[@class=“section times”]'
schedules = driver.find_elements_by_xpath(xp_schedule)
hours_list = []
carrier_list = []
for schedule in schedules:
hours_list.append(schedule.text.split('\n')[0])
carrier_list.append(schedule.text.split('\n')[1])
# split the hours and carriers, between a and b legs
a_hours = hours_list[::2]
a_carrier = carrier_list[1::2]
b_hours = hours_list[::2]
b_carrier = carrier_list[1::2]
cols = (['Out Day', 'Out Time', 'Out Weekday', 'Out Airline', 'Out Cities', 'Out Duration', 'Out Stops', 'Out Stop Cities',
'Return Day', 'Return Time', 'Return Weekday', 'Return Airline', 'Return Cities', 'Return Duration', 'Return Stops', 'Return Stop Cities',
'Price'])
flights_df = pd.DataFrame({'Out Day': a_day,
'Out Weekday': a_weekday,
'Out Duration': a_duration,
'Out Cities': a_section_names,
'Return Day': b_day,
'Return Weekday': b_weekday,
'Return Duration': b_duration,
'Return Cities': b_section_names,
'Out Stops': a_stop_list,
'Out Stop Cities': a_stop_name_list,
'Return Stops': b_stop_list,
'Return Stop Cities': b_stop_name_list,
'Out Time': a_hours,
'Out Airline': a_carrier,
'Return Time': b_hours,
'Return Airline': b_carrier,
'Price': prices_list})[cols]
flights_df['timestamp'] = strftime(“%Y%m%d-%H%M”) # so we can know when it was scraped
return flights_df
盡量讓這些名字容易理解。記住變量a表示旅行的去程信息,變量b表示旅行的返程信息。接下來(lái)說(shuō)說(shuō)下一個(gè)函數(shù)。
等等,還有什么嗎?截至目前,已經(jīng)有了一個(gè)能加載更多結(jié)果的函數(shù)和一個(gè)能爬取其他結(jié)果的函數(shù)。本可以在此結(jié)束這篇文章,而你可以自行手動(dòng)使用這些函數(shù),并在瀏覽的頁(yè)面上使用爬取功能。但是前文提到給自己發(fā)送郵件和一些其他信息的內(nèi)容,這都包含在接下來(lái)的函數(shù)start_kayak中。
它要求填入城市名和日期,并由此打開(kāi)一個(gè)kayak字符串中的地址,該字符串直接跳轉(zhuǎn)到“最佳”航班結(jié)果排序頁(yè)面。第一次爬取后,可以獲取價(jià)格的頂部矩陣,這個(gè)矩陣將用于計(jì)算平均值和最小值,之后和客涯(Kayak)的預(yù)測(cè)結(jié)果(頁(yè)面左上角)一同發(fā)送到郵件中。這是單一日期搜索時(shí)可能導(dǎo)致錯(cuò)誤的原因之一,因其不包含矩陣元素。
def start_kayak(city_from, city_to, date_start, date_end):
“““City codes - it's the IATA codes!
Date format - YYYY-MM-DD”““
kayak = ('https://www.kayak.com/flights/' + city_from + '-' + city_to +
'/' + date_start + '-flexible/' + date_end + '-flexible?sort=bestflight_a')
driver.get(kayak)
sleep(randint(8,10))
# sometimes a popup shows up, so we can use a try statement to check it and close
try:
xp_popup_close = '//button[contains(@id,”dialog-close”) and contains(@class,”Button-No-Standard-Style close “)]'
driver.find_elements_by_xpath(xp_popup_close)[5].click()
except Exception as e:
pass
sleep(randint(60,95))
print('loading more.....')
# load_more()
print('starting first scrape.....')
df_flights_best = page_scrape()
df_flights_best['sort'] = 'best'
sleep(randint(60,80))
# Let's also get the lowest prices from the matrix on top
matrix = driver.find_elements_by_xpath('//*[contains(@id,”FlexMatrixCell”)]')
matrix_prices = [price.text.replace('$','') for price in matrix]
matrix_prices = list(map(int, matrix_prices))
matrix_min = min(matrix_prices)
matrix_avg = sum(matrix_prices)/len(matrix_prices)
print('switching to cheapest results…..')
cheap_results = '//a[@data-code = “price”]'
driver.find_element_by_xpath(cheap_results).click()
sleep(randint(60,90))
print('loading more…..')
# load_more()
print('starting second scrape…..')
df_flights_cheap = page_scrape()
df_flights_cheap['sort'] = 'cheap'
sleep(randint(60,80))
print('switching to quickest results…..')
quick_results = '//a[@data-code = “duration”]'
driver.find_element_by_xpath(quick_results).click()
sleep(randint(60,90))
print('loading more…..')
# load_more()
print('starting third scrape…..')
df_flights_fast = page_scrape()
df_flights_fast['sort'] = 'fast'
sleep(randint(60,80))
# saving a new dataframe as an excel file. the name is custom made to your cities and dates
final_df = df_flights_cheap.append(df_flights_best).append(df_flights_fast)
final_df.to_excel('search_backups//{}_flights_{}-{}_from_{}_to_{}.xlsx'.format(strftime(“%Y%m%d-%H%M”),
city_from, city_to,
date_start, date_end), index=False)
print('saved df…..')
# We can keep track of what they predict and how it actually turns out!
xp_loading = '//div[contains(@id,”advice”)]'
loading = driver.find_element_by_xpath(xp_loading).text
xp_prediction = '//span[@class=“info-text”]'
prediction = driver.find_element_by_xpath(xp_prediction).text
print(loading+'\n'+prediction)
# sometimes we get this string in the loading variable, which will conflict with the email we send later
# just change it to “Not Sure” if it happens
weird = 'ˉ\\_(ツ)_/ˉ'
if loading == weird:
loading = 'Not sure'
username = 'YOUREMAIL@hotmail.com'
password = 'YOUR PASSWORD'
server = smtplib.SMTP('smtp.outlook.com', 587)
server.ehlo()
server.starttls()
server.login(username, password)
msg = ('Subject: Flight Scraper\n\n\
Cheapest Flight: {}\nAverage Price: {}\n\nRecommendation: {}\n\nEnd of message'.format(matrix_min, matrix_avg, (loading+'\n'+prediction)))
message = MIMEMultipart()
message['From'] = 'YOUREMAIL@hotmail.com'
message['to'] = 'YOUROTHEREMAIL@domain.com'
server.sendmail('YOUREMAIL@hotmail.com', 'YOUROTHEREMAIL@domain.com', msg)
print('sent email…..')
雖然沒(méi)有使用Gmail賬戶(hù)測(cè)試發(fā)送郵件,但是可以搜索到很多的替代方法,前文提到的那本書(shū)中也有其他方法來(lái)實(shí)現(xiàn)這一點(diǎn)。如果已有一個(gè)Hotmail賬戶(hù),只要替換掉個(gè)人的詳細(xì)信息,它就會(huì)開(kāi)始工作了。
如果想探索腳本的某一部分正在做什么,可以將腳本復(fù)制下來(lái)并在函數(shù)外使用它。這是徹底理解它的唯一方法。
利用剛才創(chuàng)造的一切在這些步驟之后,還可以想出一個(gè)簡(jiǎn)單的循環(huán)來(lái)使用剛創(chuàng)造的函數(shù),同時(shí)使其持續(xù)運(yùn)行。完成四個(gè)“花式”提示,寫(xiě)下城市和日期(輸入)。因?yàn)闇y(cè)試時(shí)不想每次都輸入這些變量,需要的時(shí)候可以使用以下這個(gè)清楚的方式進(jìn)行替換。
如果已經(jīng)做到了這一步,恭喜你!改進(jìn)還有很多,比如與Twilio集成,發(fā)送文本消息而不是郵件。也可以使用VPN或更加難懂的方式同時(shí)從多個(gè)服務(wù)器上研究搜索結(jié)果。還有就是驗(yàn)證碼的問(wèn)題,驗(yàn)證碼會(huì)時(shí)不時(shí)地跳出來(lái),但對(duì)此類(lèi)問(wèn)題還是有解決辦法的。不過(guò),能走到這里已經(jīng)是有很牢固的基礎(chǔ)了,你可以嘗試添加一些額外的要素。
使用腳本運(yùn)行測(cè)試的示例
留言 點(diǎn)贊 關(guān)注
我們一起分享AI學(xué)習(xí)與發(fā)展的干貨
歡迎關(guān)注全平臺(tái)AI垂類(lèi)自媒體 “讀芯術(shù)”
1、元素選擇器 標(biāo)簽名{ }
2、id選擇器 #id屬性值{ }
3、類(lèi)選擇器 .class屬性值{ }
4、選擇器分組(并集選擇器)
作用:通過(guò)它可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素(通常用于集體聲明)
語(yǔ)法:選擇器1,選擇器2,選擇器n{ }
5、復(fù)合選擇器(交集選擇器)
作用:選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素并為其設(shè)置屬性
語(yǔ)法:選擇器1選擇器2選擇器n{ }
!注意選擇器之間不能有空格,要緊挨在一起
6、通配選擇器
作用:用來(lái)選中頁(yè)面中所有的元素
語(yǔ)法:*{ }
7、后代元素選擇器
作用:選中指定元素的指定后代元素
語(yǔ)法:祖先元素 后代元素{ }
8、子元素選擇器
作用:選中指定父元素的子元素
語(yǔ)法:父元素>子元素
9、偽類(lèi)選擇器
偽類(lèi)表示元素的一種特殊狀態(tài)
:hover 移入時(shí)元素的狀態(tài)
:visited 已被訪(fǎng)問(wèn)過(guò)后的元素的狀態(tài)
:active 被點(diǎn)擊時(shí)元素的狀態(tài)
10、 屬性選擇器
作用:根據(jù)元素中的屬性或?qū)傩灾祦?lái)選取指定元素
語(yǔ)法:[屬性名]選取含有指定屬性的元素
? [屬性名=“屬性值”]選取含指定屬性值的元素
? [屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開(kāi)頭的元素
? [屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
? [屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素
11、兄弟元素選擇器
+選擇器
作用:選中一個(gè)元素后緊挨著的指定的兄弟元素
語(yǔ)法:前一個(gè)+后一個(gè)(作用在后一個(gè))
~選擇器
作用:選中后邊所有的制定兄弟元素
語(yǔ)法:前一個(gè)~后邊所有
通過(guò)設(shè)置搜索框的width屬性和heoght屬性來(lái)設(shè)置搜索框的大小。
head img 選擇器:就是指定CSS要作用的標(biāo)簽,那個(gè)標(biāo)簽的名稱(chēng)就是選擇器。意為:選擇哪個(gè)容器。
CSS的選擇器分為兩大類(lèi):基本選擇題和擴(kuò)展選擇器。
基本選擇器:
標(biāo)簽選擇器:針對(duì)一類(lèi)標(biāo)簽ID選擇器:針對(duì)某一個(gè)特定的標(biāo)簽使用
類(lèi)選擇器:針對(duì)你想要的所有標(biāo)簽使用
通用選擇器(通配符):針對(duì)所有的標(biāo)簽都適用(不建議使用)