英文:
Svelte template syntax: How can I target nested DOM elements inside an html expression with css?
问题
我使用Svelte创建一个关于烹饪的博客。我从一个返回HTML的CMS获取数据。我知道这个HTML的一部分将是无序列表。我想样式化那个列表，但我的尝试没有成功。
这是我的div。
这是我的CSS选择器。
最后，这是DOM，只是为了确保它输出我期望的内容。
有其他方法可以解决这个问题吗？谢谢。
英文:
I'm using svelte to create a blog about cooking. I am getting data from a CMS that is returning HTML. I know that part of that html will be an unordered list. I'd like to style that list but my attempts are not working.
Here is my div.
Here is my css selector.
And finally here is the DOM just to be sure that it's outputting what I expect.
Is there a different way to approach this? Thank you.
答案1
得分: 2
这对你有用吗？ :global() https://svelte.dev/docs#component-format-style
<script>
const cmsData = "<ul><li>hey</li></ul>"
</script>
<div class="content">
{@html cmsData}
</div>
<style>
.content :global(ul) {
color: red;
}
</style>
英文:
Does this work for you? :global() https://svelte.dev/docs#component-format-style
<script>
const cmsData = "<ul><li>hey</li></ul>"
</script>
<div class="content">
{@html cmsData}
</div>
<style>
.content :global(ul) {
color: red;
}
</style>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论