如何为包含其他元素的元素编写 CSS 选择器？答案

【问题标题】：How do I write a CSS selector for an element that contains other elements?如何为包含其他元素的元素编写 CSS 选择器？
【发布时间】：2020-04-07 14:31:51
【问题描述】：

注意：我不是在寻找元素的父元素。我正在寻找一个包含其他元素的元素。

我正在使用 Rails 4.2.7，并且正在使用 Nokogiri 解析 HTMl 文档。我想在我的文档中找到第一行（第一个 tr 元素）至少有一个元素的表。我该如何为此编写 CSS 选择器？请注意，我只想选择表格，而不是 th 元素本身。这是我希望从文档中选择的表格示例

<table>
    <tbody>
        <tr>
            <th>Header 1</th>
        </tr>
        <tr>
            <td>Other data</td>
        </tr>
        …
    </tbody>
</table>

【问题讨论】：

css3 中不存在父选择器。这是关于它的许多文章之一。 google.ca/amp/s/css-tricks.com/parent-selectors-in-css/amp/…。如果这是这个答案中的一个选项，你可以尝试 jquery。获取表找到父级。 stackoverflow.com/a/3523794/3366016
请阅读“minimal reproducible example”。我们想看看您尝试了什么，而不仅仅是输入数据的样本。
Is there a CSS parent selector?的可能重复
嗨，我不是在寻找元素的父元素。我正在寻找一个元素 htat 中有一个元素。
如果您专门要求 CSS 选择器来查找某些内容，这并不是一个真正的 Nokogiri 问题，这将是一个 CSS 问题，并且 Nokogiri、Ruby 和 Rails 不是合适的标签。

标签： css

【解决方案1】：

您可以尝试使用Array#select 方法过滤第一个tr 包含th 元素的所有表。

例如，假设您有一个名为 doc 的 Nokogiri 对象：

require "nokogiri"
require "open-uri"

url = # your url
doc = Nokogiri::HTML.parse(open(url))

tables = doc.css("table").select do |table|
  # consider only the first row of each table
  first_row = table.css("tr").first

  # check if that row's children contains a <th> element
  first_row.children.map(&:name).include?("th")
end

【讨论】：