用CSS设计特定HTML代码的样式

Question

我需要应用一个只捕获以下代码的css样式：

<div id="box-article-r">
 <h2>
  <a id="metodo-pago" href="#">Payment Methods...

例如，在同一页上，我有很多h2，一些其他ID为"metodo-pago"one_answers"box-article-r"的代码，还有一些"a"标签和它们的组合，但没有一个同时位于"#box-artile-r"one_answers"h2"、"a"one_answers"#metodo-pago."。我尝试过这个和一些类似的组合，但到目前为止都没有对我起作用：

#box-article-r h2 a #metodo-pago{
  display: none;
}

我不能修改HTML，只能修改CSS。我不是CSS专家，所以这对我的CSS知识来说很复杂。有谁能帮我吗？问候

Answer 1

a #metodo-pago表示具有id为metodo-pago 的子元素

而

a#metodo-pago表示具有id metodo-pago的

写入：

#box-article-r h2 a#metodo-pago{
    display: none;
}

Answer 2

删除a和id 之间的空间

a#metodo-pago

Answer 3

首先，假设在同一页面上不应该有多个具有相同名称的ID。我宁愿重构我的代码，这样就不会出现这种情况。

如果您需要为每个标签使用相同的名称，请使用类名而不是ID。

下面的代码将在一定程度上帮助解决您的问题，但请记住，它是基于有缺陷的HTML内容。

#box-article-r h2 #metodo-pago {
    display: none;
}

如果您希望使用类而不是所解释的ID，请将代码更改为：

<div class="box-article-r">
    <h2>
        <a class="metodo-pago" href="#">Payment Methods...

并以CSS为目标，如下所示：

.box-article-r h2 a.metodo-pago {
    display: none;
}