英文:
How to set one property for multiple children element using tailwind
问题
我在我的页面上有一个```contenteditable```的div，并且我想让每个子ul和ol元素都有左内边距，我要使用tailwind。
```html
<div class="[&_ol]:pl-4 [&_ul]:pl-4" contenteditable>
<ol>
<li>有序列表项</li>
</ol>
<ul>
<li>无序列表项</li>
</ul>
</div>
是否可能合并选择器，以便将来不必更改每个元素的内边距？类似于class="[&_ol,&_ul]:pl-4"？
<details>
<summary>英文:</summary>
I have a ```contenteditable``` div on my page and i want to every child ul and ol element to have a left padding in it using tailwind
<div class="[&_ol]:pl-4 [&_ul]:pl-4" contenteditable>
<ol>
<li>ordered list item</li>
</ol>
<ul>
<li>ordered list item</li>
</ul>
</div>
is it possible to unite selectors so i don't have to changed padding for every element in the future? something like ```class="[&_ol,&_ul]:pl-4"```?
</details>
# 答案1
**得分**: 1
多个选择器在任意变体中[明确不受支持](https://github.com/tailwindlabs/tailwindcss/pull/10655)，但您可以考虑通过使用[`:is()`伪类](https://developer.mozilla.org/en-US/docs/Web/CSS/:is)来绕过此限制：
```html
<script src="https://cdn.tailwindcss.com"></script>
<div class="[&_:is(ol,ul)]:pl-4" contenteditable>
<ol>
<li>有序列表项</li>
</ol>
<ul>
<li>无序列表项</li>
</ul>
</div>
英文:
Multiple selectors in arbitrary variants is explicitly not supported but you could consider working around this restriction by using the :is() pseudo-class:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="[&_:is(ol,ul)]:pl-4" contenteditable>
<ol>
<li>ordered list item</li>
</ol>
<ul>
<li>ordered list item</li>
</ul>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论