如何使用單個css選擇器嵌套在多個div中的元素？

這可能是一個簡單的問題，但我無法正常工作。下面是代碼：如何使用單個css選擇器嵌套在多個div中的元素？

HTML

<div class="modal-header"> 
    <div class="row"> 
     <div class="col-md-9"> 
      <div class="charge-items-page-title"> 
       <h1 class="page-title">Service Charges Detail</h1> 
      </div> 
     </div> 
    </div> 
</div>

我想要做的是，用一個單一的選擇得到的h1的innerHtml。我已經嘗試過css選擇器到目前爲止，但都沒有工作。

browserDriver.GetElement(".charge-items-page-title .page-title") 
browserDriver.GetElement("div.charge-items-page-title > h1")

我能得到這個通過添加id到h1做，但我想知道我錯過了什麼？提前致謝。

來源

2016-07-28 V. P. Verma

某種原因'h1.page-title'不起作用？ – Scott

@Scott我剛剛試過你的建議，但仍然得到空元素 –

我懷疑'browserDriver.GetElement（）'是問題。 – Scott

我不知道你在做什麼，但你提供的兩個代碼示例應該可以工作。您可以在下面看到演示。我讓你的第一個代碼將字體顏色設置爲紅色，第二個代碼將背景顏色設置爲黃色。

.charge-items-page-title .page-title { 
 
    color: red; 
 
} 
 
div.charge-items-page-title > h1 { 
 
    background-color: yellow; 
 
}

<div class="modal-header"> 
 
    <div class="row"> 
 
    <div class="col-md-9"> 
 
     <div class="charge-items-page-title"> 
 
     <h1 class="page-title">Service Charges Detail</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-07-28 02:59:40

我希望那些也工作，但由於某種原因，他們不工作 –

你是什麼意思「他們不工作」？他們在演示中工作，對嗎？ –

是的，你的演示正在工作。我的意思是相同的CSS選擇器不能在我的代碼中工作。 –

在這裏你去。 getElementsByTagName適用於外部div。

var x = document.getElementsByClassName('modal-header')[0]; 
 
var y = document.getElementsByTagName('h1')[0]; 
 

 
function print(){ 
 
    alert(y.innerHTML); 
 
}

.modal-header{ 
 
    display:none; 
 
}

<div class="modal-header"> 
 
    <div class="row"> 
 
     <div class="col-md-9"> 
 
      <div class="charge-items-page-title"> 
 
       <h1 class="page-title">Service Charges Detail</h1> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<button onclick="print()">Test</button>

來源

2016-07-28 03:15:04

如何使用單個css選擇器嵌套在多個div中的元素？

回答

相關問題