3

我有一个缩进 55px 的 .content CSS 类。在某些情况下，我想在段落的开头包含一个链接，但这个链接我不想缩进。

除了创建一个不包含缩进的新 .content2 类之外，是否还有使用直接应用于链接的类来否定缩进？

我尝试使用通过调用来格式化链接的类应用到链接的负缩进值，但这似乎只会改变链接自己框中的文本，而实际上我希望链接框不缩进。

有问题的页面：http: //www.fccorp.us/development/index.jfx.php

非常感谢您的图形 snaplemouton！

这提出了一个新的但相关的问题：多个相互矛盾的类的级联顺序是什么？我在 Firefox（当前版本 19.0.2，非测试版）中进行测试，链接通常使用两个类，但某些类使用第三个。

- 更新 -

我的编辑从需要中删除了一个类（尽管我的 css 文件中需要九个额外的行）。然而，这并没有解决我的保证金问题：

第一个类配置链接的“盒子”（盒子模型）的外观，包括边距以及配置链接文本的外观（链接、已访问、活动）。（以前的第三个）现在的第二个类，仅在这些链接放置在段落内时使用，用于否定不再适用的值，因为链接在段落内。我通过第一类设置顶部和底部边距，这适用于（几乎）每个按钮。对于（现在）第二类，我试图否定放置在段落中的少数链接的那些边距。但由于某种原因，那些通过第二类使用 0px（零）边距值否定的值不会被更改。它们仍然保留着第一类分配的价值。

（当我键入此内容时，我意识到如何消除调整链接/已访问/活动属性的键，因此现在正在更改。但我怀疑这会改变任何事情。如果确实如此，我会更新它。） - 作为我在更新中说过，这个变化并没有解决边距没有被消除的问题。

但是，与其尝试取消现有边距，我是否需要通过使用负数来实际否定它们？这应该可行，但我认为 CSS 级联意味着如果某些样式相互矛盾，它们会覆盖其他样式。还是它们加在一起？

4

3 回答 3

3

有多种方法可以做到这一点。通过覆盖边距或填充（请参阅编辑 3 上的链接），将缩进设置为 0，或者以我更喜欢的方式，为您的内容使用宽度为 100% 的 div 元素并将其浮动到左侧。

<div style="float:left; width:100%;">
     <a style="float:left">stuff</a>
</div>

编辑：它还应该修复在锚点旁边有一行的文本。如果您确实希望将文本放在横幅的右侧，则可以删除 div 并将锚点浮动到左侧。

我真的更喜欢使用 Divs，因为它非常灵活，可以让您真正设置或删除空白空格，就像您希望的那样。

编辑 2：我什至制作了一幅绘画图像来向您展示不同之处。:)

在此处输入图像描述

编辑 3：要回答您的新问题，这里有一个链接，几乎解释了有关级联顺序的所有内容。

http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

基本上是重量最高的胜利。如果两者的权重相同，则后者总是获胜。（以后到者为准。）

顺序：样式直接添加到元素>样式表>默认

在样式表中，#id > .class > 元素

如果有多个相同的，最后一个将获胜。

编辑 4：对不起，我在回答中的第二句话错了。我编辑了它。

您只需将其添加到您的锚点

margin-left:0px;
margin-bottom: 0px;
margin-top: 0px;

删除边距。

于 2013-03-26T14:19:01.040 回答
3

CSS级联

级联主要由特异性决定。以下是从高到低的优先级列表。

1. !important modifier
2. Dynamically-applied styles using JavaScript
3. Inline styles specified using the style attribute
4. Specificity of the selector (higher specificity wins)
      (a)  #id                                 (100 points each)
      (b)  .class, :pseudo-class, [attribute]  ( 10 points each)
      (c)  element, ::pseudo-element           (  1 point each )
      (d)  *                                   (  0 points each)
5. Whichever one appears last

最后应用具有最高优先级的样式。在平局中，后面出现在代码中的获胜。

这有点过于简单化了，但它应该传达基本思想。更详细地说：

  • 类、伪类或属性胜过任意数量的元素或伪元素。
  • 一个 id 胜过任意数量的类、伪类或属性。
  • 通过静态 HTML 或 JavaScript 设置的内联样式胜过任意数量的 id。
  • 最重要的是，带有!important修饰符的风格胜过没有它的任何风格。

特异性例子

                 formal         informal
selector         notation       notation
---------        --------       --------
* {}             0,0,0,0        0000
div {}           0,0,0,1        0001
.a {}            0,0,1,0        0010
#a {}            0,1,0,0        0100
div#a.b.c {}     0,1,2,1        0121

此外，内联样式的特异性是 1000 点 (1,0,0,0)。

于 2013-03-26T15:39:18.307 回答
1 
text-indent: 0px;

CSS 属性。

否定该值并将其用于链接的 padding-left 或 margin-left 将给出您想要的结果。

<p style="text-indent:40px;">
    <a hre="#" style="margin-left:-40px;" onclick="this.style.display='none';">Un-indent</a> blah blah blah blah blah</p>
于 2013-03-26T13:57:05.367 回答