问题

<div>
    &lt;p data-a=&quot;true&quot;&gt;<strong>Text with bold font</strong>&lt;/p&gt;
    &lt;p data-a=&quot;false&quot;&gt;&lt;/p&gt;
    &lt;p data-a=&quot;false&quot;&gt;&lt;/p&gt;
    &lt;p data-a=&quot;false&quot;&gt;&lt;/p&gt;
&lt;/div&gt;

所期望的行为是，当 p 元素的 data-a 为 true 时，字体变为粗体。我尝试将 [&>a]:data-[a="true"]:font-bold 应用于父 div 标签，但它会尝试检测父元素是否具有 data-a，当它为 true 时，将 font-bold 应用于所有子元素。在这里，你如何更改 "操作顺序"？

<details>
<summary>英文:</summary>

I have the following HTML
```html
&lt;div&gt;
    &lt;p data-a=&quot;true&quot;&gt;&lt;/p&gt;
    &lt;p data-a=&quot;false&quot;&gt;&lt;/p&gt;
    &lt;p data-a=&quot;false&quot;&gt;&lt;/p&gt;
    &lt;p data-a=&quot;false&quot;&gt;&lt;/p&gt;
&lt;/div&gt;

The behaviour I am looking for, is that when the p element's data-a is true, a the font becomes bold.

I tried applying [&>a]:data-[a="true"]:font-bold to the parent div tag, but it tries to detect if the parent has data-a, and applied font-bold to all children when it is true. How do I change the "order of operations" here?

答案1

得分: 0

<div> 上使用一个任意变体 [&>[data-a=true]>a]:，如果你需要的话：

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->
    <script src="https://cdn.tailwindcss.com"></script>

    <div class="[&amp;&gt;[data-a=true]&gt;a]:font-bold">
      <p data-a="true">
        <a>Foo</a>
        <span>Bar</span>
      </p>
      <p data-a="false">
        <a>Foo</a>
        <span>Bar</span>
      </p>
    </div>

<!-- end snippet -->

<script src="https://cdn.tailwindcss.com"></script>

<div class="[&>[data-a=true]>a]:font-bold">
  <p data-a="true">
    <a>Foo</a>
    <span>Bar</span>
  </p>
  <p data-a="false">
    <a>Foo</a>
    <span>Bar</span>
  </p>
</div>