Question

在我的程序中，我有一个显示在2个不同部分的文本元素。它将显示为A部分，并再次显示在B部分（弹出窗口）中。我希望使用可以用于两个部分的CSS创建一个对象。这样我可以调用同一个对象来检查这个元素，无论它在哪里显示。我似乎无法弄明白。也许这是不可能的，或者我可能需要有更多HTML和CSS经验的人向我展示光明。

以下是显示的A部分中此元素的HTML

<td id="treeCol" valign="top" style="overflow: hidden; display: block;">
 <div id="orgTreeAndSearch">
  <div class="orgSelection">
   <span id="selection" class="" title="Select an org unit">Select an org unit</span>

以下是未显示时A部分中此元素的HTML（显示B部分时隐藏）

<td id="treeCol" valign="top" style="overflow: hidden; display: none;">
 <div id="orgTreeAndSearch">
  <div class="orgSelection">
   <span id="selection" class="" title="Select an org unit">Select an org unit</span>

以下是B部分显示时此元素的HTML

<div class="blockUI blockMsg blockPage PopUp White" style="z-index: 1011; position: absolute; padding: 0px; margin: 0px; width: 1365px; top: 50px; left: 50px; text-align: left; color: rgb(0, 0, 0); border: 0px none; background-color: rgb(255, 255, 255);">
 <div class="White" style="margin: 0px 20px 20px; display: block;">
  <div class="PopUpClose" align="right">
   <div>
    <div align="center">
     <table style="width: 100%;">
      <tbody>
       <tr>
        <td valign="top" align="left" style="width: 410px;">
         <div class="orgSelection">
          <span id="dataAccessOrgSelection" class="">Select org unit(s)</span>

以下是B部分中未显示此元素的HTML（显示部分A时隐藏）

<div class="White" style="margin: 0px 20px 20px; display: none;">
 <div class="PopUpClose" align="right">
  <div>
   <div align="center">
    <table style="width: 100%;">
     <tbody>
      <tr>
       <td valign="top" align="left" style="width: 410px;">
        <div class="orgSelection">
         <span id="dataAccessOrgSelection" class="">Select org unit(s)</span>

要选择A部分中的元素，我可以使用该ID，它将起作用

css=#selection

要选择B部分中的元素，我也可以使用它的ID，它将起作用

css=#dataAccessOrgSelection

我想为这个元素设置一个选择器，所以我尝试了这个。但是，它会同时选择显示和隐藏的元素。因此，如果我在A部分，它将为A和B选择元素，即使B被隐藏（反之亦然）

div.orgSelection span[id]

有没有办法让这个元素有一个选择器，只选择可见元素？我可以在style属性中检查“display：none”，但是当它位于部分A的td和部分B的div时，我不知道如何执行此操作。

Answer 1

好的，如果我理解你的问题，你需要在可见状态下对A和B都有效的CSS选择器。

td#treeCol[style*=block] span#selection, div.PopUp>div[style*=block] span#dataAccessOrgSelection

一个小小的解释。逗号 - 用于CSS选择器中的逻辑OR。您的divs个可见style属于block属性的一部分 - [style*=block]（span）。因此，对于两个选择器，我们发现id所需的div包含在可见StaleElementReferenceException内。如果扇区不够正确，可以多玩一些属性。

为了确保您的方法有效，您应该每次在检查其可见性之前使用此选择器调用元素位置以避免{{1}}，因为很明显，这些元素不相同

但是，如果我是你，我会检查一个特定的逻辑而不是＆＃39;如果＆＃39;案件。您应该确切知道何时以及应该可见的元素。

Answer 2

正如亚历山大·彼得罗维奇所提到的，我建议使用不同的元素选择器，因为在我看来，它们确实是不同的元素。在这种情况下，您可以找到带有ID的简易选择器。

但是如果有一个选择器 - 但是两个元素构造的正当理由，你需要弄清楚，你的dom的哪些部分可能会有所不同，哪些部分是稳定的。我对css不是那么坚定，但如果有帮助的话，我可以给你一些xpath表达式：

//span[(@id='dataAccessOrgSelection') or (@id='selection')]
//span[@class='']
//span[contains(text(),'Select') and contains(text(),'org unit')]
//div[@class='orgSelection']/span

我想你将能够将这个xpath-selectors转换为css-selectors ...也许这个pdf会有所帮助： http://code.google.com/p/timger-book/source/browse/trunk/cheatsheet/Locators_table_1_0_2.pdf

如何仅使用CSS选择显示的元素

2 个答案: