Python中如何通过CSS计算元素的绝对定位来获取去哪儿m版酒店价格
去哪儿价格返回的是 html ,通过 css 定位,显示出价格。
<div class="qt-light-orange qt-font20 qunar_mix">
<span class="price" style="width:33px">
<i class="qm18d6dd7e">2</i>
<i class="qmacf0943b">2</i>
<i class="qm11251921">2</i>
<i class="qm5c6d111c">5</i>
<i class="qmbd09efa2">8</i></span>
</div>
css 如下:
.qunar_mix span.price i {
position: absolute;
left: 0;
bottom: -1px;
font-style: normal;
background: #f0f0f0;
height: 100%;
}
.qunar_mix span.price i.qm5c6d111c{left: -100px; margin-left:300px;background:none;}
.qunar_mix span.price i.qmcf5711c8{left: -100px; margin-left:22px; padding-left:22px; background:none;}
.qunar_mix span.price i.qmbd09efa2{left: 0px; margin-left:11px; padding-left:11px; background:none;}
.qunar_mix span.price i.qm18d6dd7e{left: -33px; margin-left:11px; padding-left:33px; background:none;}
.qunar_mix span.price i.qm11251921{left: -22px; margin-left:11px; padding-left:11px; background:none;}
.qunar_mix span.price i.qmca340bd1{left: 11px; margin-left:11px; padding-left:11px; background:none;}
.qunar_mix span.price i.qmc1c11156{left: 11px; margin-left:22px; padding-left:11px; background:none;}
.qunar_mix span.price i.qmacf0943b{left: -100px; padding-left:300px;background:none;}
最终显示的价格是 228 ,如何通过 css 来计算得到的价格呢。能想到的就是通过 phantomjs 渲染后截图,然后图片识别可以,但是效率不高
Python中如何通过CSS计算元素的绝对定位来获取去哪儿m版酒店价格
这个问题需要结合网页抓取和CSS解析。核心思路是:先获取元素的CSS定位属性,然后递归计算其相对于文档的偏移量。
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time
def get_absolute_position(element):
"""计算元素的绝对定位坐标"""
# 获取元素自身的offset位置
offset_x = element.location['x']
offset_y = element.location['y']
# 递归计算所有父元素的滚动偏移
driver = element.parent
scroll_x = driver.execute_script("return window.pageXOffset;")
scroll_y = driver.execute_script("return window.pageYOffset;")
# 最终绝对位置 = 元素offset位置 - 滚动偏移
absolute_x = offset_x - scroll_x
absolute_y = offset_y - scroll_y
return absolute_x, absolute_y
def get_hotel_price():
"""获取去哪儿酒店价格"""
driver = webdriver.Chrome()
try:
driver.get("https://m.qunar.com/hotel/")
# 等待页面加载
time.sleep(3)
# 查找价格元素 - 需要根据实际页面结构调整选择器
# 这里以class选择器为例,实际使用时需要检查页面结构
price_elements = driver.find_elements(By.CSS_SELECTOR, ".price .num")
prices = []
for element in price_elements:
# 获取绝对定位
x, y = get_absolute_position(element)
# 获取价格文本
price_text = element.text.strip()
if price_text:
prices.append({
'price': price_text,
'position': (x, y),
'element': element
})
return prices
finally:
driver.quit()
# 使用示例
if __name__ == "__main__":
hotel_prices = get_hotel_price()
for item in hotel_prices:
print(f"价格: {item['price']}, 位置: {item['position']}")
关键点说明:
get_absolute_position()函数通过element.location获取元素相对于视口的偏移,再减去页面滚动位置得到绝对坐标- 价格元素的选择器需要根据去哪儿m版实际页面结构调整,可能需要用开发者工具检查
- 注意页面动态加载,可能需要添加显式等待
一句话建议: 先用浏览器开发者工具找准价格元素的选择器,再调整代码中的定位逻辑。
不显示.qunar_mix span.price i.qm5c6d111c{left: -100px; margin-left:300px;background:none;}
200
无 html.qunar_mix span.price i.qmcf5711c8{left: -100px; margin-left:22px; padding-left:22px; background:none;}
-56
显示.qunar_mix span.price i.qmbd09efa2{left: 0px; margin-left:11px; padding-left:11px; background:none;}
22
显示.qunar_mix span.price i.qm18d6dd7e{left: -33px; margin-left:11px; padding-left:33px; background:none;}
11
显示.qunar_mix span.price i.qm11251921{left: -22px; margin-left:11px; padding-left:11px; background:none;}
0
无 html.qunar_mix span.price i.qmca340bd1{left: 11px; margin-left:11px; padding-left:11px; background:none;}
33
无 html.qunar_mix span.price i.qmc1c11156{left: 11px; margin-left:22px; padding-left:11px; background:none;}
44
不显示.qunar_mix span.price i.qmacf0943b{left: -100px; padding-left:300px;background:none;}
200
加法
然后去除 html 中没有的
然后去除过界的
然后根据加的结果数值排序。
有效,感谢
不明觉厉,好奇怎么生成这样的 css
去哪儿我也抓过,不需要这样的,它的价格隐藏在返回的 html 的某个属性里,你认真观察下就知道了
<div class=“qt-light-orange qt-font20 qunar_mix”>
<span class=“price” style=“width:33px”>
<i class=“qm18d6dd7e”>2</i>
<i class=“qmacf0943b”>2</i>
<i class=“qm11251921”>2</i>
<i class=“qm5c6d111c”>5</i>
<i class=“qmbd09efa2”>8</i></span>
</div> 这就是返回的 html ,差不多半年前我也看过,是可以直接看到价格的,最近应该改了
…用读屏软件的遇到这些真是…
它不怕被搜索引擎降权么
反爬的丧心病狂啊


