相关疑难解决方法(0)
Scoped CSS未在组件中应用
我有以下表单组件:
<template>
<div>
<form>
<input placeholder="Recipe Name">
<textarea placeholder="Recipe Description..." rows="10"></textarea>
</form>
</div>
</template>
<script>
export default {
name: 'AddRecipeForm'
}
</script>
<style scoped>
form {
display: flex;
flex-direction: column;
}
</style>
在<style>使用scoped属性.
应用时,CSS 不会被加载.scoped删除后,它会被应用.
但是我希望将它保留在组件的本地.
为什么在scoped属性存在时CSS不会被应用？
28
推荐指数
推荐指数
2
解决办法
解决办法
9064
查看次数
查看次数
如何在VueJS单文件组件中正确使用"范围"样式？
文档上VueJS指出,"作用域"应该限制样式组件.但是,如果我创建具有相同"baz"样式的2个组件,它将从一个组件泄漏到另一个组件:
scoped
<template>
<div class="baz">
<Bar></Bar>
</div>
</template>
<style scoped>
.baz {
color: red;
}
</style>
baz
<template>
<div class="baz">bar</div>
</template>
<style scoped>
.baz {
background-color: blue;
}
</style>
我希望"baz"在两个组件中都会有所不同.但是在生成一个网页后,我可以看到蓝色背景上的红色文字,这意味着"foo"的范围风格会影响"bar"组件.生成的代码如下所示:
<div class="baz" data-v-ca22f368>
<div class="baz" data-v-a0c7f1ce data-v-ca22f368>
bar
</div>
</div>
如您所见,VueJS通过在"bar"组件中指定两个数据属性来有意生成"泄漏".但为什么？
20
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
在此上下文中不允许元素样式作为元素主体的子元素(<style scoped> not validating)
<!DOCTYPE html>
...
<style scoped>
/* css */
</style>
w3.org验证器给了我这个错误:
Line 883, Column 17: Element style not allowed as child of element body in this context.
(Suppressing further errors from this subtree.)
<style scoped>...
Contexts in which element style may be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content …13
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
Div与外部样式表？
我得到了一个外部样式表(.css文件),不会以任何方式改变.但是,我需要将此样式表应用于单个div,因此我已经存在的网页中的div的内容.我目前正在将样式表的内容作为文本读入我需要影响的div中的空白样式标记(使用.innerHTML)但这仍然影响整个网页而不仅仅是单个div.有人可以帮忙吗？
11
推荐指数
推荐指数
2
解决办法
解决办法
5万
查看次数
查看次数
作用域 CSS 不起作用并且样式会泄露
我有一个名为“stylesheet.css”的 CSS 文件
p {
margin: 0%;
font-family: cursive;
font-size: 1cm;
}
h1 {
font-family: sans-serif;
}我在同一文件夹中有一个 html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<p>Test</p>
<h1>Test</h1>
<div>
<style scoped>
@import "stylesheet.css";
</style>
<p>Test (Supposed to be bigger and different font)</p>
<h1>Test (Should have a different font)</h1>
</div>
</body>
</html>但由于某种原因，我在 div 的作用域样式标签中导入的样式规则泄漏到了正文并设置了上面 p 标签的样式：
1
推荐指数
推荐指数
1
解决办法
解决办法
1206
查看次数
查看次数