css 查询选择不包含 table 元素的 div 元素

Question

我需要 select div 元素外 table ie.text ' 所需地址 '

如果我使用 main div[itemprop="address"] 我得到所有 8 地址

我想唯一标识所需的 div，但不包含 table 作为父项

Html:

<main>
  <div>
    <div itemprop="address">Required Address</div>
    <table>
      <tbody>
        <tr><td>
          <div itemprop="address">Address1</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address2</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address3</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address4</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address5</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address6</div>
        </td></tr>    
        <tr><td>
          <div itemprop="address">Address7</div>
        </td></tr>
      </tbody>
    </table>
  </div>
</main>

Answer 1

您可以在此处使用子选择器：

doc.select("main > div > div[itemprop='address']");

Answer 2

如果这不是您的用例的选项，您应该为此使用 id。

main div > div[itemprop="address"] {
  // some code
}

Answer 3

使用 > operator.The 样式仅适用于 div，前提是它有一个父标签 div 并且 main 作为父标签。

main > div > div[itemprop="address"] {

color: blue

}

<main>
  <div>
    <div itemprop="address">Required Address</div>
    <table>
      <tbody>
        <tr><td>
          <div itemprop="address">Address1</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address2</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address3</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address4</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address5</div>
        </td></tr>
        <tr><td>
          <div itemprop="address">Address6</div>
        </td></tr>    
        <tr><td>
          <div itemprop="address">Address7</div>
        </td></tr>
      </tbody>
    </table>
  </div>
</main>

Answer 4

或者，您可以设置（在本例中）通用 div 的颜色，并将其回滚到 table 标签内的 div。

div[itemprop="address"] {
  color: red;
}

table div[itemprop="address"] {
  color: initial;
}

<main>
  <div>
    <div itemprop="address">Required Address</div>
    <table>
      <tbody>
        <tr>
          <td>
            <div itemprop="address">Address1</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address2</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address3</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address4</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address5</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address6</div>
          </td>
        </tr>
        <tr>
          <td>
            <div itemprop="address">Address7</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</main>

css 查询选择不包含 table 元素的 div 元素

css query for selecting div element which does not contain table element

html

css

css-selectors

jsoup