小编hur*_*rtz的帖子

不久之前,我为自己做了一个小页面,我偶然发现了一个自那时无法回答的错误.

打开http://darngoodpictures.com/#showme时,您会在左侧和右侧看到导航箭头.这些完全是CSS制作的.现在我会采取另一种方式,但它已经完成,我坚持它:)

在我测试的每个浏览器中,箭头看起来都应该如此.唯一的例外是Opera.Opera以我以前从未见过的方式呈现箭头.谁能解释那里发生了什么？我很快发现Opera在箭头的border-radius-property方面存在一些问题,但是有人能提供更准确的信息吗？这种行为太奇怪了......

编辑:它变得越来越怪异.最初我认为,我的CSS结合border-radius以某种方式引发了问题,但问题是边界半径.当边界宽度与它结合时,它会变得更加强烈.请参阅以下jsfiddles:

我:http://jsfiddle.net/62ujn/(一切都按照人们的预期呈现)

关键规则:

border-radius: 0;
border-width: 200px;

II:http://jsfiddle.net/62ujn/1/(Opera中的第一个小问题)

关键规则:

border-radius: 50px;
border-width: 200px;

III:http://jsfiddle.net/62ujn/2/(从这里开始,Opera中的渲染变得荒谬)

关键规则:

border-radius: 50px;
border-width: 200px 150px;

四:http://jsfiddle.net/62ujn/3/

关键规则:

border-radius: 50px;
border-width: 200px 150px 100px;

V:http://jsfiddle.net/62ujn/4/

关键规则:

border-radius: 50px;
border-width: 200px 150px 100px 50px;

奇怪.非常.奇怪.

编辑2:

我刚刚联系了Opera,因为我怀疑除了"Opera-Bug"之外别无其他答案......当我得到满意的答案时,我会保持这个页面的更新:)

我非常了解 CSS 模块的概念，以至于我确信我不想为将来做任何其他事情。

目前我正在尝试重构一个现有的应用程序以使用 CSS 模块，该应用程序从那时起就使用了经典的 sass 和 BEM 方法。

在我描述我的问题之前，我想明确表示我不明白我正在解决一个并不真正属于 CSS 模块领域的问题。应该仅在单个模块内应用样式。最多应该将 CSS 类与其他模块的其他 CSS 类组合在一起。但基本上：您构建一个 (HTML-) 模块，然后使用 CSS 模块来设置该模块的样式，仅此而已。

这就是问题所在：在重构过程中，有一个问题源于拥有基于 SASS 的样式系统。当此类应该与来自另一个模块的另一个类结合使用时，我找不到在 CSS 模块环境中使用 CSS 类的有效方法。

SASS 中的示例：

[页面.scss]

.wrapper {
    margin: 0;
}

[标题.scss]

.headline {
    color: green;
}
.wrapper {
    .headline {
        color: orange;
    }
}

如您所见：一个模块（页面）定义了一个 CSS 类“包装器”，另一个模块定义了一个 CSS 类“标题”。此外，当放置在类“包装器”中时，类“标题”的行为应该有所不同。

同样，我知道这并不是 CSS 模块的真正领域。但我真的很想知道这是否可以通过 CSS 模块实现？CSS 模块的“组合”特性并不适合这里......

我试图在当前版本 4 中了解 d3。具体来说：我试图在 react 和 es6 中为简单的折线图创建 x 轴。

我看过 Mike Bostock 的例子以及他是如何做到的：

svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

但这既不是 react 也不是 ES6。

在另一个站点上，我看到了以下变体：

renderAxis() {
  var node  = this.refs.axis;
  var axis = d3.svg.axis().orient(this.props.orient).ticks(5).scale(this.props.scale);
  d3.select(node).call(axis);
}

render() {
  return <g className="axis" ref="axis" transform={this.props.translate}></g>
}

这是 React 和 ES6，但不是版本 4 中的 d3。

我可以尝试将第 3 版代码用于 d3 的第 4 版，但是： d3.select 非常困扰我。当我使用 react（或其中的其他库，如 d3）时，我不想进行 DOM 调用。React 应该用于以最有效的方式渲染到 DOM 中，而不是让我获取 DOM 节点。

所以，我的问题是：创建一个简单的 x 轴的反应方式是什么？或者，如果还没有这样的答案：采用 Mike Bostock …

虽然我很确定我的问题的答案是“做不到”，但我想确定一下并在这里问你们。

我有一个相当典型的场景，我想通过我的网站启用选项卡（即使用键盘上的选项卡键）。用户刚刚点击的项目应该通过 CSS 进行视觉标记。到目前为止，一切都很好。显然，这需要焦点伪类：

a {
    color: #000;

    &:hover {
        color: lighten(#000, 10%); // discreet change
    }

    &:focus {
        background-color: green; // extreme change
    }
}

但我只想在用户通过页面切换时应用此样式。当用户悬停或单击某个元素时，样式应该有所不同。

示例：用户悬停或单击锚点。然后，视觉辅助可以是谨慎的，因为用户已经知道他与哪个元素进行了交互。但当他浏览页面时，他不能那么确定，因此样式应该更加激进。

我遇到的问题是：一个元素在选项卡页面和单击页面上应用了焦点样式。

是否有一种仅 CSS 的方法可以仅在元素通过 Tab 键获得焦点时应用样式？

再说一次，我很确定这是不可能的，但只是为了确保我已经问了这个问题。

我似乎完全不了解将babel的根程序选项放在哪里。

如果我有一个monorepo，并且需要告诉不同的子软件包，它们将为babel.config.js向上看，那么我应该将rootMode: "upwards"这些子软件包放入.babelrc中，对吗？由于产生的错误，这不起作用

Error: .rootMode is only allowed in root programmatic options

不知何故，我根本找不到在哪里放置/使用根程序选项的任何示例...有人能指出我正确的方向吗？