[英]Shadow Dom ::content css selector priority?
我有这样的影子dom元素:
<style>
::content div{
padding-left:130px;
}
</style>
<div class="shadow">
foo
<content select="div"></content>
</div>
从页面上加载的样式中,尝试使用像这样的选择器覆盖它
.shadow /deep/ div{
padding-left:50px;
}
但是影子dom内部的选择器具有更高的优先级。 我发现赋予第二选择器更高优先级的唯一方法是使用重要。 还有另一种方法吗?
如果您的div
来自轻型DOM,则实际上不需要/deep/
。
我认为您有两个同等重要的选择器.shadow div
::content div
和.shadow div
。 解决此问题的一种方法是给div
一个类,然后让主要样式使用该类来提高他们的得分。
例如: jsbin
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<style>
.widget .special {
color: blue;
}
</style>
</head>
<body>
<polymer-element name="x-foo">
<template>
<style>
::content > div {
color: red;
}
</style>
<h1>Hello from x-foo</h1>
<content select="div"></content>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
<x-foo class="widget">
<div class="special">Hello World</div>
</x-foo>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.