Question

我已将全局属性设置为，以使该段落的第一个字母成为一个很大的彩色字母。现在我有一个标签，我不希望这种情况发生。如何只向1个标签添加例外？

p::first-letter 
{
    font-size: 200%;
    color: #0565a8;
}

我正在使用上面的代码来获得我想要的效果。现在我有一个段落，我希望简单明了，没有任何影响。

<div id="next_event">
    <p style="padding-left: 5px;">Next event: 13.04</p>
</div>

这是我希望以纯文本形式提供所有内容的段落。

Answer 1

您可以使用:not()选择器。

将您之前应用的CSS替换为：

p:not(.someClass)::first-letter 
{
    font-size: 200%;
    color: #0565a8;
}

您也可以将.someClass替换为#someId

Answer 2

使用inherit设置父元素的字体大小和颜色（p的父级）。

＆＃13;

/* set style for paragraph first letter */
p::first-letter 
{
    font-size: 200%;
    color: #0565a8;
}


/* override the style for paragraph first letter, with the parent (inherit) style */
#next_event p::first-letter 
{
    font-size: inherit;
    color: inherit;
    padding-left: 5px;
}

＆＃13;

<p>hello world</p>

<div id="next_event">
    <p>Next event: 13.04</p>
</div>

＆＃13;

Answer 3

如果我是你，我会保持简单，因为你最有可能在你的内容中使用比装饰性更多的标签。

为什么不将一个类用于装饰标记的少数几个实例，而不是不的特殊方法？

p {
    padding-left: 5px;
}

p.decorative::first-letter {
    font-size: 200%;
    color: #0565a8;
}

如果您不想在装饰标签上填充，只需将其更改为：

p.decorative::first-letter {
    padding-left:0;
    font-size: 200%;
    color: #0565a8;
}

如果装饰标签是规则而不是例外，您可以使用@ nicael的答案，只需使用:not()选择器。

Answer 4

只需在该特定段落标记中添加一个类，然后应用如下所示的必要更改：

HTML：

<p class="no-effect">Lorem Ipsum</p>

CSS：

p.no-effect  {
    font-size: 100%;
    color: #333;
}

确保p.no-effect css属性 你的p全局标记btw

Answer 5

:not(#next-event) > p::first-letter {
   font-size:100%;
   /*etc*/
}

您可以在任何地方使用它，不需要更改html标记

设置全局<p>标记</p>的例外

5 个答案: