Question

在Twitter Bootstrap的2.3.2版中，您可以在mixins.less中找到它：

// Webkit-style focus
// ------------------
.tab-focus() {
  // Default
  outline: thin dotted #333;
  // Webkit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

你还可以发现这个mixin正在使用forms.less和buttons.less。

然而，它并没有在scaffolding.less中使用，我发现这是正常的链接：

// Links
// -------------------------

    a {
      color: @linkColor;
      text-decoration: none;
    }
    a:hover,
    a:focus {
      color: @linkColorHover;
      text-decoration: underline;
    }

但是，我发现，更改.tab-focus()的值也会影响我的普通元素（链接）的:focus。怎么可能？ TB v.2.3.2中的.tab-focus()的CSS如何适用于我的链接？我找不到了！

PS：我确实看到他们在最新版本的TB中应用了它，请参见下文，然而问题是在2.3.2版本中如何应用它并不会影响:focus。

// Links

a {
  color: @link-color;
  text-decoration: none;

  &:hover,
  &:focus {
    color: @link-hover-color;
    text-decoration: underline;
  }

  &:focus {
    .tab-focus();
  }
}

Answer 1

如果您要导入reset.less，您会发现它就在那里。

来自bootstrap reset.less

// Focus states
a:focus {
  .tab-focus();
}

.tab-focus（）Twitter Bootstrap在一个元素上工作，怎么可能？

1 个答案: