4

场景

我试图通过使用自定义属性来区分组件component。例子：

<div component="A">
  <span>Hello</span>
</div>

设计这个很容易：

[component=A] span {
  color: red;
}

问题

这是棘手的部分。为了确保组件不会产生副作用，它不应该对子组件中的任何内容进行样式设置：

<div component="A">
  <span>This should be styled by component=A styles</span>
  <div component="B">
    <span>This should NOT be styled by component=A styles</span>
  </div>
</div>

完整示例

这是一个简单的例子。它定义了外部组件的结构和样式。

HTML

<div component="A">
  <span>Component A (red)</span>
  <div>
    <span>Component A (red)</span>
  </div>
  <div component="B">
    <span>Subcomponent B (black)</span>
    <div>
      <span>Subcomponent B (black)</span>
    </div>
    <div component="A">
      <span>Subcomponent A (red)</span>
    </div>
  </div>
  <span>Component A (red)</span>
</div>

CSS

[component=A] :not([component]) span {
  color: red;
}

第一种方法

这是第一个幼稚的方法。

它有几个逻辑问题，但我想你明白我想要做什么。

我的感觉是，这对于纯 CSS 是不可能的。但在编写自定义 Javascript 之前，我想问你我是否遗漏了什么或过度思考了问题。

4

3 回答 3

2

如果您的组件具有可靠的预期结构，为什么不使用 > 直接子选择器？

[component="A"] > span {
  color: red;
}
<div component="A">
  <span>This should be styled by component=A styles</span>
  <div component="B">
    <span>This should NOT be styled by component=A styles</span>
  </div>
</div>

编辑：

如果您想嵌套在未指定组件的情况下继承父样式的组件，则这样的方法可能会起作用 - 基于您的初始方法。为此，您需要为组件 B 和 A 指定样式。

https://codepen.io/anon/pen/wGyeMg

body {
  font-size: 20px;
}

[component=A] > span,
[component=A] div:not([component]) > span {
  color: red;
}

[component=B] > span,
[component=B] div:not([component]) > span {
  color: black;
}
<div component="A">
  <span>Component A (red)</span>
  <div>
    <span>Component A (red)</span>
  </div>
  <div component="B">
    <span>Subcomponent B (black)</span>
    <div>
      <span>Subcomponent B (black)</span>
    </div>
    <div component="A">
      <span>Subcomponent A (red)</span>
    </div>
  </div>
  <span>Component A (red)</span>
</div>

于 2016-04-11T09:34:10.923 回答
1

您可以遵循BEM 约定：

.a {
  /* component A */
}
.a__red {
  /* element red child of component A */
  color: red;
}

.b {
  /* component B */
}
.b__black {
  /* element black child of component B */
  color: black;
}
<div class="a">
  <span class="a__red">Component A (red)</span>
  <div>
    <span class="a__red">Component A (red)</span>
  </div>
  <div class="b">
    <span class="b__black">Subcomponent B (black)</span>
    <div>
      <span class="b__black">Subcomponent B (black)</span>
    </div>
    <div class="a">
      <span class="a__red">Subcomponent A (red)</span>
    </div>
  </div>
  <span class="a__red">Component A (red)</span>
</div>

于 2016-04-11T11:31:41.620 回答
0

看看这些，

我不像你那样有经验，但也许它会对你有所帮助。

小提琴：https ://jsfiddle.net/eua98tqa/2/

HTML：

<div component="A">
 <span>This should be styled by component=A styles</span>
 <div component="B">
   <span>This should NOT be styled by component=A styles</span>
 </div>
</div>

CSS：

[component=A] span{
  color: red;
}

[component=B]  span{
  color: BLUE;
}
于 2016-04-11T09:30:02.090 回答