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版酒店价格

10 回复

去哪儿这招有点狠 …


这个问题需要结合网页抓取和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']}")

关键点说明:

  1. get_absolute_position()函数通过element.location获取元素相对于视口的偏移,再减去页面滚动位置得到绝对坐标
  2. 价格元素的选择器需要根据去哪儿m版实际页面结构调整,可能需要用开发者工具检查
  3. 注意页面动态加载,可能需要添加显式等待

一句话建议: 先用浏览器开发者工具找准价格元素的选择器,再调整代码中的定位逻辑。

不显示.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 ,差不多半年前我也看过,是可以直接看到价格的,最近应该改了

…用读屏软件的遇到这些真是…

它不怕被搜索引擎降权么

反爬的丧心病狂啊

回到顶部