Question

我正在尝试解决CKEditor中的错误，它不能正确应用边距。使用Bootstrap，第一个跨度的边距有效地被忽略，因为它落在行之外。但是在CKEditor中，出于某种原因，它位于内部行中，因此将最后一个跨度推到新行上，因为行内没有足够的空间。

解决此问题的一种简单方法是将第一个范围的margin-left设置为0，因此我最终将其添加到我的content.css文件中：

[class*="span"]:first-of-type {
    margin-left: 0px;
}

这很好用，只要所有跨度相同，所有div或所有文章。但是，如果我有一篇文章和一旁，那么css似乎将它们作为两种不同的第一种类型进行选择，并将:first-of-type规则应用于它们。例如：

<div class="container">
    <div class="row">
        <article class="span6">
            ...some html text
        </article>
        <aside class="offset3 span3">
            ...some more html text
        </aside>
    </div>
</div>

当我只想将文章的margin-left设置为0时，文章和旁边都会将margin-left设置为0。这只是一个例子，可能有任何组合div，文章和你可以想到的，以及bootstrap允许的任何数字。

经过短暂的谷歌我发现this question，这似乎与我的问题类似。答案解释说:first-of-type实际上是在元素之外，而不是类，这解释了我看到的行为。不幸的是，这个答案中指定的工作对我来说不起作用，因为我试图从第一个div中删除一些css，并保持其余部分完整。

我可以使用哪种解决方法允许我使用[class*="span"]定位第一个元素？如果没有，那么CKEditor和Bootstrap会出现这个错误的其他已知解决方案吗？

Answer 1

为什么不使用nth child selector：

[class*="span"]:nth-child(1) {}

Example

Answer 2

正如您已经提到的，first-of-type使用元素，而不是选择器。由于article和aside都是您示例中的第一个类型，因此它们将应用该样式。

在我的头脑中，我认为没有办法解决你所选择的困境，但是，如果我理解你的问题，我通常会通过为所有人{{定义一种风格来解决它。 1}}然后恢复/重新定义后面的那些：

[class*="span"]

Answer 3

您可以重置重置[class*=span]，然后检查是否有其他人关注。 （无论它是第一位还是位于结构内）。

如果是这种情况，在同一级别上还有其他[class*=span]，您可以将它们设置回similar original value。

由于[class*=span]已被覆盖，您需要使用更强的选择器再次覆盖

[class*="span"] {
  color:green;
  margin-left:0;
  border:solid;
}
[class*="span"] ~ [class]
{
  margin-left: 20px;
  color:red;
}

http://codepen.io/gcyrillus/pen/nFixc

如果你链接它，代码工具会自动引导。

选择：仅按类别排序

3 个答案: