为全局 标签设置例外

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

只需向该特定段落标记添加 class 并应用必要的更改，如下所示：

HTML:

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

CSS:

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

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

Answer 3

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

/* 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;
}

<p>hello world</p>

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

Answer 4

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

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

Answer 5

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

而不是 not 以一切正常为目标的特殊方式，为什么不对装饰性  标签的少数实例使用 class？

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() 选择器。

为全局 <p> 标签设置例外

Setting an exception for global <p> tag

html

css

css-selectors