用于选择不包含表格元素的div元素的css查询

Question

我需要在表格外选择div元素，即文本“ 必填地址”

如果我使用的是 main div [itemprop =“ address”] ，则我将获得全部8个地址

我想唯一地标识所需的div，而不将表作为父级

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

使用>运算符。该样式仅适用于具有父div且main作为父标记的div。

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 3

如果这不是用例的选择，则应为此使用id。

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

Answer 4

或者，您可以设置（在这种情况下）通用div的颜色，然后为表格标签内的那些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>