如何使用单个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中的元素？

回答

相关问题