如何有条件地否定段落标签上的文本缩进

Question

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

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

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

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

非常感谢您提供的图形 snaplemouton！

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

--更新--

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

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

（当我输入这个时，我意识到如何消除调整链接/已访问/活动属性的键，所以现在正在更改。但我怀疑这会改变任何东西。如果是这样，我会更新这个。 ) - 正如我在更新中所说，此更改并没有解决边距未被消除的问题。

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

Answer 1

有多种方法可以做到这一点。通过覆盖边距或填充（请参阅编辑 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; 

删除边距。

Answer 2

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)。

Answer 3

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>