CSS选择器。如何选择非直接父级的div内的按钮[重复] 。

Question

这个问题在这里已经有了答案:

CSS选择器的">"（大于符号）是什么意思？ (8个回答)

在CSS选择器中，空格是什么意思？ 即.classA.classB和.classA.classB的区别是什么？ (3个答案)

封闭 3个月前.

我有以下代码。

<div class="column mcb-column mcb-item-115eb3f58 one column_pricing_item servicebutton">
  <div class="pricing-box pricing-box-featured pricing-box-box">
    <div class="plan-header">
      <h2>Service</h2>
      <p class="subtitle">xyz</p>
    </div>
    <div class="plan-inside">
      <h5>Our Service</h5>
      <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
      </ul>
    </div>
    <div class="plan-footer">
      <a
        href="#"
        class="button button_theme button_js"
        ><span class="button_label">More</span></a
      >
    </div>
  </div>
</div>

我如何选择带有 "更多 "标签的按钮 通过 "引用 "第一个DIV的类来进行CSS处理 servicebutton?

.servicebutton > .button_theme {...}

不工作。

.plan-footer > .button-theme {...} 

可以，但我需要使用类的 servicebutton 从头 div 元素。

先谢谢你了。

谢谢

Answer 1

Boom. 只要跟着链子走到你要找的元素就可以了。

.servicebutton .plan-footer .button_label {
  background-color: blue;
  }

<div class="column mcb-column mcb-item-115eb3f58 one column_pricing_item servicebutton">
  <div class="pricing-box pricing-box-featured pricing-box-box">
    <div class="plan-header">
      <h2>Service</h2>
      <p class="subtitle">xyz</p>
    </div>
    <div class="plan-inside">
      <h5>Our Service</h5>
      <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
      </ul>
    </div>
    <div class="plan-footer">
      <a
        href="#"
        class="button button_theme button_js"
        ><span class="button_label">More</span></a
      >
    </div>
  </div>
</div>