常見的css選擇器有，css元素定位工具？

cssSelector定位，屬于CSS高級(jí)等位，它的定位方式，利用選擇器進(jìn)行的。在CSS 中，選擇器是一種模式，用于選擇需要添加樣式的對(duì)象。“CSS” 列指示該屬性是在哪個(gè)CSS 版本中定義的。(CSS1、CSS2 還是CSS3。);

下面羅列了一部分的CSS定位方式。看到這么多是否覺得CSS不再簡(jiǎn)單，其實(shí)不然常用的幾種方式作者已標(biāo)記，CSS定位是平常使用過(guò)程中非常重要的一種方式。它與Xpath定位有諸多類似的地方，但是無(wú)論從性能還是語(yǔ)法上來(lái)說(shuō)CSS都是比較有優(yōu)勢(shì)的。

1、一般情況下定位速度要比XPATH快

2、語(yǔ)法比Xpath要簡(jiǎn)潔

用爬蟲技術(shù)能做到哪些有趣的事情？

看到這個(gè)問題必須來(lái)怒答一波～用python爬蟲爬便宜機(jī)票了解一下？

喜歡旅行又怕吃土？讓Python來(lái)爬取最便宜機(jī)票吧！

圖源：

videoblocks.com

你喜歡旅行嗎？

這個(gè)問題通常會(huì)得到一個(gè)肯定的答案，隨后引出一兩個(gè)有關(guān)之前冒險(xiǎn)經(jīng)歷的故事。大多數(shù)人都認(rèn)為旅行是體驗(yàn)新文化和開闊視野的好方法。但如果問題是“你喜歡搜索機(jī)票的過(guò)程嗎？”也許話題就到此為止了……

可事實(shí)上，便宜的機(jī)票往往也很重要！本文將嘗試構(gòu)建一個(gè)網(wǎng)絡(luò)爬蟲，該爬蟲對(duì)特定目的地運(yùn)行并執(zhí)行帶有浮動(dòng)日期（首選日期前后最多三天）的航班價(jià)格搜索。它會(huì)將結(jié)果保存為excel文件并發(fā)送一封包含快速統(tǒng)計(jì)信息的電子郵件。顯然，這個(gè)爬蟲的目的就是幫助我們找到最優(yōu)惠的價(jià)格！

你可以在服務(wù)器上運(yùn)行腳本(一個(gè)簡(jiǎn)單的Raspberry Pi就可以)，每天運(yùn)行一到兩次。結(jié)果會(huì)以郵件形式發(fā)送，建議將excel文件存入Dropbox文件夾，以便隨時(shí)隨地查看。

因?yàn)榕老x以“浮動(dòng)日期”進(jìn)行搜索，所以它會(huì)搜索首選日期前后最多三天的航班信息。盡管該腳本一次僅運(yùn)行一對(duì)目的地，但可以很容易地改寫該爬蟲使其每個(gè)循環(huán)運(yùn)行多個(gè)目的地。最終甚至可能找到一些錯(cuò)誤票價(jià)...那會(huì)很有意思！

另一個(gè)爬蟲

某種意義上來(lái)講，網(wǎng)絡(luò)爬取是互聯(lián)網(wǎng)“工作”的核心。

也許你認(rèn)為這是一個(gè)十分大膽的說(shuō)法，但谷歌就是從拉里·佩奇用Java和Python構(gòu)建的網(wǎng)絡(luò)爬蟲開始的。爬蟲不斷地爬取信息，整個(gè)互聯(lián)網(wǎng)都在試圖為所有問題提供最佳的可能答案。網(wǎng)絡(luò)爬取有不計(jì)其數(shù)的應(yīng)用程序，即使更喜歡數(shù)據(jù)科學(xué)中的其他分支，你仍需要一些爬取技巧以獲得數(shù)據(jù)。

這里用到的一些技術(shù)來(lái)自于最近新的一本佳作《Python網(wǎng)絡(luò)數(shù)據(jù)采集》，書中包含與網(wǎng)絡(luò)爬取相關(guān)的所有內(nèi)容，并提供了大量簡(jiǎn)例和實(shí)例。甚至有一個(gè)特別有意思的章節(jié)，講述如何解決驗(yàn)證碼檢驗(yàn)的問題。

Python的拯救

第一個(gè)挑戰(zhàn)就是選擇爬取信息的平臺(tái)，本文選擇了客涯（Kayak）。我們?cè)囘^(guò)了Momondo, 天巡（Skyscanner）, 億客行（Expedia）和其它一些網(wǎng)站，但是這些網(wǎng)站上的驗(yàn)證碼特別變態(tài)。

在那些“你是人類嗎？”的驗(yàn)證中，嘗試了多次選擇交通燈、十字路口和自行車后，客涯似乎是最好的選擇，盡管短時(shí)間內(nèi)加載太多頁(yè)面它會(huì)跳出安全檢查。

我們?cè)O(shè)法讓機(jī)器人每4到6個(gè)小時(shí)查詢一次網(wǎng)站，結(jié)果一切正常。雖然說(shuō)不定哪個(gè)部分偶爾會(huì)出點(diǎn)小問題，但是如果收到驗(yàn)證碼，既可以手動(dòng)解決問題后啟動(dòng)機(jī)器人，也可以等待幾小時(shí)后的自動(dòng)重啟。

如果你是網(wǎng)絡(luò)爬取新手，或者不知道為何有些網(wǎng)站花費(fèi)很大力氣阻止網(wǎng)絡(luò)爬取，那么為構(gòu)建爬蟲寫下第一行代碼前，你一定要多加努力。

谷歌的“網(wǎng)絡(luò)爬取規(guī)范”：

http://lmgtfy.com/?q=web+scraping+etiquette

系緊安全帶...

導(dǎo)入并打開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à)）的郵件，并將帶有這三種排序類型的dataframe數(shù)據(jù)表保存為一份excel文件。

· 以上所有步驟會(huì)在循環(huán)中重復(fù)，每X小時(shí)運(yùn)行一次。

每個(gè)Selenium項(xiàng)目都以一個(gè)網(wǎng)頁(yè)驅(qū)動(dòng)器開始。我們使用Chromedriver驅(qū)動(dòng)器，但還有其它選擇。PhantomJS和Firefox也很受歡迎。下載Chromedriver后，將其置于一個(gè)文件夾中即可。第一行代碼會(huì)打開一個(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)該打開一個(gè)Chrome瀏覽器窗口，機(jī)器人會(huì)在其中導(dǎo)航。

一起來(lái)做一個(gè)快速測(cè)試：在另一個(gè)窗口上訪問客涯網(wǎng)（http://kayak.com），選擇往返城市和日期。選擇日期時(shí)，確保選擇的是“+-3天”。由于在編寫代碼時(shí)考慮到了結(jié)果頁(yè)面，所以如果只想搜索特定日期，很可能需要做一些微小的調(diào)整。

點(diǎn)擊搜索按鈕在地址欄獲取鏈接。它應(yīng)該類似于下面所使用的鏈接，將變量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)看，第一次搜索似乎一直沒有問題，所以如果想運(yùn)行這份代碼，并讓它在較長(zhǎng)的時(shí)間間隔后運(yùn)行，必須解決這個(gè)難題。你并不需要十分鐘就更新一次這些價(jià)格，對(duì)吧？

每個(gè)XPath都有陷阱

到目前為止，已經(jīng)打開了一個(gè)窗口，獲取了一個(gè)網(wǎng)站。為了開始獲取價(jià)格和其他信息，需要使用XPath或CSS選擇器，我們選擇了XPath。使用XPath導(dǎo)航網(wǎng)頁(yè)可能會(huì)令人感到困惑，即使使用從inspector視圖中直接使用“復(fù)制XPath”，但這不是獲得所需元素的最佳方法。有時(shí)通過(guò)“復(fù)制XPath”這個(gè)方法獲得的鏈接過(guò)于針對(duì)特定對(duì)象，以至于很快就失效了。《Python網(wǎng)絡(luò)數(shù)據(jù)采集》一書很好地解釋了使用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)潔性清晰可見。它搜索具有data-code等于price屬性的元素a。第一種方法查找id等于wtKI-price_aTab的元素，并遵循第一個(gè)div元素和另外四個(gè)div和兩個(gè)span。這次……會(huì)成功的。現(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ì)象的類是“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)備起飛吧！

最容易編寫的函數(shù)就是加載更多結(jié)果的函數(shù)，所以代碼由此開始。為了在不觸發(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)單的辦法分開它們，比如在第一個(gè) section_a_list和section_b_list變量中，該函數(shù)還返回一個(gè)flight_df數(shù)據(jù)表。所以可以分離在不同分類下得到的結(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中。

它要求填入城市名和日期，并由此打開一個(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…..')

雖然沒有使用Gmail賬戶測(cè)試發(fā)送郵件，但是可以搜索到很多的替代方法，前文提到的那本書中也有其他方法來(lái)實(shí)現(xiàn)這一點(diǎn)。如果已有一個(gè)Hotmail賬戶，只要替換掉個(gè)人的詳細(xì)信息，它就會(huì)開始工作了。

如果想探索腳本的某一部分正在做什么，可以將腳本復(fù)制下來(lái)并在函數(shù)外使用它。這是徹底理解它的唯一方法。

利用剛才創(chuàng)造的一切

在這些步驟之后，還可以想出一個(gè)簡(jiǎn)單的循環(huán)來(lái)使用剛創(chuàng)造的函數(shù)，同時(shí)使其持續(xù)運(yùn)行。完成四個(gè)“花式”提示，寫下城市和日期（輸入）。因?yàn)闇y(cè)試時(shí)不想每次都輸入這些變量，需要的時(shí)候可以使用以下這個(gè)清楚的方式進(jìn)行替換。

如果已經(jīng)做到了這一步，恭喜你！改進(jìn)還有很多，比如與Twilio集成，發(fā)送文本消息而不是郵件。也可以使用VPN或更加難懂的方式同時(shí)從多個(gè)服務(wù)器上研究搜索結(jié)果。還有就是驗(yàn)證碼的問題，驗(yàn)證碼會(huì)時(shí)不時(shí)地跳出來(lái)，但對(duì)此類問題還是有解決辦法的。不過(guò)，能走到這里已經(jīng)是有很牢固的基礎(chǔ)了，你可以嘗試添加一些額外的要素。

使用腳本運(yùn)行測(cè)試的示例

留言 點(diǎn)贊 關(guān)注

我們一起分享AI學(xué)習(xí)與發(fā)展的干貨

歡迎關(guān)注全平臺(tái)AI垂類自媒體 “讀芯術(shù)”

css選擇器識(shí)別范圍？

css選擇器優(yōu)先級(jí)核心：每個(gè)選擇器本身有優(yōu)先級(jí)，作用范圍越具體優(yōu)先級(jí)越高。

CSS優(yōu)先級(jí)從高到低分別是：

1.在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。

2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式

3.id選擇器

4.類選擇器

5.偽類選擇器

6.屬性選擇器

7.標(biāo)簽選擇器

8.通配符選擇器

9.瀏覽器選擇器

當(dāng)CSS樣式的規(guī)則由多個(gè)選擇器組成時(shí)，id選擇器的權(quán)值為1000，class選擇器為100，標(biāo)簽選擇器為10，按權(quán)值求和的記過(guò)高低決定哪個(gè)優(yōu)先。當(dāng)兩個(gè)css規(guī)則的權(quán)值相同時(shí)，誰(shuí)更具體用誰(shuí)，也就是權(quán)值高的選擇器作用的越具體優(yōu)先級(jí)越高。當(dāng)兩個(gè)選擇器規(guī)則和權(quán)值都是一樣，后面樣式會(huì)覆蓋前面的！

css中為什么color添加顏色？

color意思就是顏色，所以可以前面加顏色后面加顏色代碼。

CSS color顏色語(yǔ)法：

color:#000000;

Css樣式中color后直接加RGB顏色值（#FFFFFF 、#000000 、#F00）

RGB顏色值在實(shí)際布局時(shí)候確定，可以使用Photoshop（簡(jiǎn)稱PS）拾取工具進(jìn)行獲取獲得。

三、兩種方法設(shè)置對(duì)象顏色樣式

1、在DIV標(biāo)簽內(nèi)使用color顏色樣式

<div >www.jb51.net</div>

2、在CSS選擇器中使用color顏色樣式CSS代碼：

.divcss5{color:#00F}

/* 設(shè)置對(duì)象divcss5內(nèi)文字為藍(lán)色 */